同步从jQuery运行CSS动画

Question

有什么方法可以等到应用CSS DOM更改？

下面是一个例子：

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演示：https://jsfiddle.net/tfxbej9q/

我期望的：<div>跳转到位置200，然后启用动画并且浏览器平滑移动<div> 10px到右边（位置210）。

会发生什么：<div>顺畅地从位置0移到210

我的解决方案（但我不喜欢它）：有

$(".box").css("transform", "translate3d(200px,0,0)"); 
setTimeout(function() { 
     $(".box").addClass("anim"); 
     $(".box").css("transform", "translate3d(210px,0,0)"); 
}, 10); 

是任何功能：添加setTimeout功能等到DOM更改应用？

Answer 1

几周前我有同样的问题，并使用window.requestAnimationFrame来解决它。

这不是一个真正的jQuery问题，这是浏览器试图保存重绘。解决这个问题的唯一方法是强制浏览器使用2重绘，或者使用timeout/requestAnimationFrame/.delay（1）或者通过强制重新计算类似于offsetHeight的样式来重绘。

$(".box").css("transform", "translate3d(200px,0,0)"); 
window.requestAnimationFrame(function(){ 
    $(".box").addClass("anim"); 
    $(".box").css("transform", "translate3d(210px,0,0)"); 
}); 

它看起来很像您的超时解决方案。 jsfiddle example

$(".box").css("transform", "translate3d(200px,0,0)"); 
$(".box").get(0).offsetHeight; 
$(".box").addClass("anim"); 
$(".box").css("transform", "translate3d(210px,0,0)"); 

jsfiddle example

mgHenry做了一个小扩展到jQuery来使这个看起来有点更好在你的代码https://gist.github.com/mgHenry/6154611

Answer 2

你可以使用具有complete回调选项的jquery函数/方法，如jquery animate。