JSFiddle - React, Tailwind, and code Playground

by maxx0r

HTML

<div id="wrapper">
<div id="card1">1</div>
<div id="card2">2</div>
<div id="card3">3</div>
</div>

CSS

div {
 width:200px;
height:300px;
position:absolute;
 top:0px;
left:0px;    
    line-height:300px;
    text-align:center;
    font-size:30px;

}
div { z-index:2; }
#card1 { background:red; }
#card2 { background:green; }
#card3 { background:orange; }

#wrapper > div:hover {        
}
div.ToTheLeft {
 -webkit-animation:moveCardLeft 600ms 0ms linear forwards;   
}
div.moveBack {
 -webkit-animation:moveCardBack 600ms 0ms linear forwards;      
}
@-webkit-keyframes moveCardLeft {
    from { left:0px; }
    to { left:210px; }  
}
@-webkit-keyframes moveCardBack {
    from { left:210px; }
to {  left:0px; }
}

JavaScript

$(document).ready(function() {
    $("#wrapper div").click(function(evt, ui) {
        console.log(evt);
        $(this).addClass("ToTheLeft");
           
        $(document).on("webkitAnimationEnd", "div.ToTheLeft", function () {
            $(this).removeClass("ToTheLeft")
                    .css("z-index", "0")
                    .addClass("moveBack");                    
            
        });
        $(document).on("webkitAnimationEnd", "div.moveBack", function () { 
            var firstDivOfParent = $($("div", $(this).parent())[0]);
            console.log("all divs",  $("div", $(this).parent()));
            console.log("first div", firstDivOfParent);
            $(this).removeClass("moveBack").css("z-index", "1").parent().prepend($(this));
        });
    });        
});