Is there a method to delay until CSS DOM changes take effect?
For instance:
CSS:
.box {
width: 100px;
height: 100px;
background: red;
}
.anim {
transition: transform 2s;
}
HTML:
<div class="box"></div>
jQuery:
$(".box").css("transform", "translate3d(200px,0,0)");
$(".box").addClass("anim");
$(".box").css("transform", "translate3d(210px,0,0)");
JSFiddle example: https://jsfiddle.net/tfxbej9q/
Expected behavior: <div> should instantly jump to position 200, then apply animation and smoothly move <div> 10px to the right (position 210).
Actual behavior: <div> is uniformly moved from position 0 to 210.
My current workaround involves using a setTimeout function:
$(".box").css("transform", "translate3d(200px,0,0)");
setTimeout(function() {
$(".box").addClass("anim");
$(".box").css("transform", "translate3d(210px,0,0)");
}, 10);
Are there any functions that wait for DOM changes to be applied?