JSFiddle - React, Tailwind, and code Playground

by ducka

HTML

<button id="btn-animate">Animate!</button>
<div class="multiview">
    <div class="view view1">View 1</div>
    <!--<div class="view view2">View 2</div>
    <div class="view view3">View 3</div>-->
</div>

CSS

.view1 { background-color:red; }
.view2 { background-color:blue; }
.view3 { background-color:yellow; }

.multiview {
    position:relative;
    
    height:200px;
    width:300px;
    
    border:3px green solid;
    
}

.view {
    position:absolute;
    top:100%;    
    height:100%;
    width:100%;
}

.view.test {
    top:0%;
    left:0%;
}

.view.enter-left {
    animation-name: view-enter-left;
    animation-duration: 10s;
    animation-timing-function:ease;
    animation-iteration-count:1;
    animation-direction:normal;
    animation-delay:0;
    animation-play-state:running;
}

@keyframes view-enter-left {
    0% {
        top:100%;
        left:0%;
    }

    
    100% {
        top:100%;
        left: 0%;
    }
}

JavaScript

$("#btn-animate").click(function() {
   $(".view1").addClass("enter-left")
   
   setTimeout(function() {
       $(".view1").removeClass("enter-left");
   }, 1200);
});