JSFiddle - React, Tailwind, and code Playground

by Juan Muñoz

HTML

<button id="startTransition">Keep Clicking Me!</button><br /><br />

<div class="boxOne">
    Box 1
 </div>

<div class="boxTwo" style="display: none;">
    Box 2
 </div>

CSS

.boxOne
{
    width: 100%;
    height: 200px;
    background-color: red;
    font-weight: bold;
    color: white;
    position: absolute;

}
.boxTwo
{
    width: 100%;
    height: 200px;
    background-color: blue;
    font-weight: bold;
    color: white;
    position: absolute;
}

JavaScript

$("#startTransition").on("click", function()
{
    
    if( $(".boxOne").is(":visible")) 
    {
        $(".boxOne").transition({ x: '-100%', opacity: 0.1 }, function () { $(".boxOne").hide(); });
        $(".boxTwo").css({ x: '100%' });
        $(".boxTwo").show().transition({ x: '0%', opacity: 1.0 });
        return;        
    }
    
    $(".boxTwo").transition({ x: '-100%', opacity: 0.1 }, function () { $(".boxTwo").hide(); });
    $(".boxOne").css({ x: '100%' });
    $(".boxOne").show().transition({ x: '0%', opacity: 1.0 });
    
});