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にジャンプすると、アニメーションが有効になり、ブラウザが円滑にを右に（位置210）移動します。 <div>スムーズに（私はそれを好きではない）210

私の解決策に位置0から移動されています：は何が起こる

$(".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の問題ではありません。これは、再塗りつぶしを保存しようとしているブラウザです。これを修正する唯一の方法は、ブラウザにtimeout/requestAnimationFrame/.delay（1）を使用するか、offsetHeightなどのスタイルを再計算することによって、2回の再描画を使用するようにすることです。

$(".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

jquery animateのように、completeコールバックオプションを持つjquery関数/メソッドを使用できます。