JSFiddle - React, Tailwind, and code Playground

by bgmort

HTML

<button onclick="moveBox()">Move it</button>
<button onclick="reset()">Reset</button>
<div id="box"></div>

CSS

#box {
    background: red;
    width: 30px;
    height: 30px;
    position: relative;
    left: 0px;
    top: 0px;
}

#box.moved {
    background: green;
    left: 100px;
    top: 100px;
    transition: transform 500ms ease-out;
    transform: translate(0px, 0px);
}
#box.moved.pre {
    background: yellow;
    transition: none;
    transform: translate(-100px, -100px);
}

JavaScript

var on = false;
function moveBox() {
    on = !on;
    
    $('#box').addClass('moved pre')
    
    //*
    setTimeout(
    /*/
    requestAnimationFrame(
    //*/
        function() {
         $('#box').removeClass('pre')
    }, 35)
}

function reset() {
    $('#box').removeClass('moved')
}