JSFiddle - React, Tailwind, and code Playground
HTML
<div id="theElement">
my div
</div>
<button onclick="animateX(500)">
animate
</button>
<button onclick="setX(500)">
set
</button>
CSS
#theElement {
position: relative;
left: 200px;
transition: left 1s;
}
JavaScript
var element = document.getElementById("theElement");
window.animateX = function(px) {
element.style.left = px + "px";
}
window.setX = function(px) {
element.style.transition = "none";
element.style.left = px + "px";
setTimeout(function() {
element.style.transition = "left 1s";
});
}