JSFiddle - React, Tailwind, and code Playground

by tabalinas

HTML

<div id="panel"></div>
<button id="test">Start</button>

CSS

#panel {
    border: 1px solid red;
    width: 100px;
    height: 100px;
    position: absolute;
    opacity: 0;
    transition:all 1s linear;
}

#test {
    margin-top: 150px;
    
}

JavaScript

var show = function() {
    //$("#panel").css("transform", "translate3d(300px, 0, 0)");
    $("#panel").css("opacity", 1);
}

var long = function() {
    var a = 2;
    for(var i = 0; i < 1000000000; i++) a ++;
    $("#test").text("completed");
}

$("#test").click(function() {
    show();
    setTimeout(function() {
        long();
    }, 10);    
});