JSFiddle - React, Tailwind, and code Playground

by shomz

HTML

<div id="myDiv"></div>
<button onclick="anim()">Do it</button>
<button onclick="anim2()">Original way</button>

CSS

#myDiv {
    width: 50px;
    height: 50px; 
    background: black
}
.scaleXStart {
    visibility: hidden;
    z-index: 0;
    transform:scaleX(0);
}

.scaleXEnd {
    z-index: 3;
    transform: scaleX(1);
    transition: transform 1s;
}

JavaScript

function anim(){
    a = document.querySelector('#myDiv');
    a.className = 'scaleXStart';
    setTimeout(function(){a.className = 'scaleXEnd';}, 0)
}
function anim2(){
    a = document.querySelector('#myDiv');
    a.className = 'scaleXStart';
    a.className = 'scaleXEnd';
}