JSFiddle - React, Tailwind, and code Playground

by abhiklpm

HTML

<div class='wrap'>
    <div class="ds one current">Remember that the transitions set in the :hover statement are the ones that will be used as the hover state is applied. The 'default' transition settings will be used when returning to the default state.</div>
    
</div>
<span class="up">up</span><br>
<span class="down">down</span>

CSS

.wrap {
    height: 200px;
    width: 200px;
    overflow: hidden;
    position: relative;
}
.ds {
    width:100%;
    height:100%;
    transition: all 600ms ease-in-out;
    position:absolute;
    -moz-transform: translateX(0px) translateY(200px);
    -webkit-transform: translateX(0px) translateY(200px);
    -o-transform: translateX(0px) translateY(200px);
    -ms-transform: translateX(0px) translateY(200px);
    transform: translateX(0px) translateY(200px);
}
.up {
    -moz-transform: translateX(0px) translateY(-200px);
    -webkit-transform: translateX(0px) translateY(-200px);
    -o-transform: translateX(0px) translateY(-200px);
    -ms-transform: translateX(0px) translateY(-200px);
    transform: translateX(0px) translateY(-200px);
}
.down {
    -moz-transform: translateX(0px) translateY(200px);
    -webkit-transform: translateX(0px) translateY(200px);
    -o-transform: translateX(0px) translateY(200px);
    -ms-transform: translateX(0px) translateY(200px);
    transform: translateX(0px) translateY(200px);
}
.current {
    -moz-transform: translateX(0px) translateY(0px);
    -webkit-transform: translateX(0px) translateY(0px);
    -o-transform: translateX(0px) translateY(0px);
    -ms-transform: translateX(0px) translateY(0px);
    transform: translateX(0px) translateY(0px);
    z-index: 2;
}
.one {
    background: red;
    z-index: 1;
}
.two {
    background:green;
}
.three {
    background:black;
}

JavaScript

$(function(){
    $(".up, .down").on("click", function(){
        $c = $(".current");
        $c.addClass("up");
        $(".ds").append("<div class='ds' >In all the examples above you may have noticed some strange effects when the animation is reversed - particularly when the mouse moves away from the trigger area before the animation has completed.</div>")
        $(".ds").removeClass("current");
        $c.next(".ds").addClass("current");
        //$up = $(".up");$down = $(".down");
        //$c.addClass("prev");
        //$p.addClass("current");
    })
})