JSFiddle - React, Tailwind, and code Playground

by zminic

HTML

<div>
    <div class="first slide">
        first
    </div>

    <div class="second slide">
        second
    </div>
</div>

CSS

.first, .second
{
    width: 100px;
    height: 100px;
    border: 1px solid red;
    float: left;
    z-index: -10;
}


@-webkit-keyframes slideinfromright {
    from { -webkit-transform: translateX(100%); }
    to { -webkit-transform: translateX(0); }
}
@-moz-keyframes slideinfromright {
    from { -moz-transform: translateX(100%); }
    to { -moz-transform: translateX(0); }
}
@-webkit-keyframes slideinfromleft {
    from { -webkit-transform: translateX(-100%); }
    to { -webkit-transform: translateX(0); }
}
@-moz-keyframes slideinfromleft {
    from { -moz-transform: translateX(-100%); }
    to { -moz-transform: translateX(0); }
}
@-webkit-keyframes slideouttoleft {
    from { -webkit-transform: translateX(0); }
    to { -webkit-transform: translateX(-100%); }
}
@-moz-keyframes slideouttoleft {
    from { -moz-transform: translateX(0); }
    to { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes slideouttoright {
    from { -webkit-transform: translateX(0); }
    to { -webkit-transform: translateX(100%); }
}
@-moz-keyframes slideouttoright {
    from { -moz-transform: translateX(0); }
    to { -moz-transform: translateX(100%); }
}
.slide.out, .slide.in {
    -webkit-animation-timing-function: ease-out;
    -webkit-animation-duration: 350ms;
    -moz-animation-timing-function: ease-out;
    -moz-animation-duration: 350ms;
}
.slide.out {
    -webkit-transform: translateX(-100%);
    -webkit-animation-name: slideouttoleft;
    -moz-transform: translateX(-100%);
    -moz-animation-name: slideouttoleft;
}
.slide.in {
    -webkit-transform: translateX(0);
    -webkit-animation-name: slideinfromright;
    -moz-transform: translateX(0);
    -moz-animation-name: slideinfromright;
}
.slide.out.reverse {
    -webkit-transform: translateX(100%);
    -webkit-animation-name: slideouttoright;
    -moz-transform: translateX(100%);
    -moz-animation-name: slideouttoright;
}
.slide.in.reverse {
    -webkit-transform: translateX(0);
    -webkit-animation-name:...

JavaScript

$.fn.animationComplete = function( callback ) {
        if ( $.support.cssTransitions ) {
            return $( this ).one( 'webkitAnimationEnd animationend', callback );
        }
        else{
            // defer execution for consistency between webkit/non webkit
            setTimeout( callback, 0 );
            return $( this );
        }
    };

$('.first').click(function()
 {
     var $first = $(this),
         $second = $first.next();
     
     $first.removeClass('in reverse').addClass('out');
     $second.removeClass('in reverse').addClass('out');
     //$second.show().removeClass('out reverse').addClass('in');

 });

$('.second').click(function()
 {
     var $second= $(this),
         $first = $second.prev();
     
     $second.removeClass('out reverse').addClass('in reverse');
     $first.removeClass('out reverse').addClass('in reverse');
     //$first.show().removeClass('out reverse').addClass('in reverse');

 });