Everything seems to be working fine with the transition, but when I skip using setTimeout and directly apply the transform, the div instantly reaches the end of the transition.
function move(x, y, delay) {
let el = document.getElementById('myDiv');
el.style.transform = `translateX(${x}%)`
el.style.transition = `transform ${delay}s linear`
setTimeout(() => {
el.style.transform = `translateX(${y}%)`
}, 1000)
}
move(100, 200, 1).myDiv {
height: 50px;
width: 50px;
background: blue;
}<div class="myDiv" id="myDiv">
Content
</div>In this scenario, the div immediately reaches the end of the transition. Since JavaScript is synchronous, shouldn't all these instructions be executed sequentially? Why isn't the entire transition taking place in this case?
function move(x, y, delay) {
let el = document.getElementById('myDiv');
el.style.transform = `translateX(${x}%)`
el.style.transition = `transform ${delay}s linear`
el.style.transform = `translateX(${y}%)`
}
move(100, 200, 1).myDiv {
height: 50px;
width: 50px;
background: blue;
}<div class="myDiv" id="myDiv">
Content
</div>