クラスをリセットするとCSSアニメーションが再開しない

Question

CSSシェーダ+アニメーションを使用しています。次のように私のシェーダクラスが定義されています

.shader{ 
-webkit-filter :custom(url(v.vs) mix(url(f.fs) multiply destination-over), 200 200); 
-webkit-animation-name: test; 
-webkit-animation-duration: 2s; 
-webkit-animation-iteration-count: 1 
} 

私は動的に$('#holder').addClass('shader');と$('#holder').removeClass('shader');

を通じてjqueryのを使用して解除/スタイル（シェーダ+アニメーション）を設定しようとしています、私はリセットしたときしかし、奇妙なことがあります（removeClassの後にaddClassを呼び出すなど）、シェーダだけが再適用されますが、アニメーションは表示されません（アニメーションを開始するタイミングを確認するためにAnimationStartイベントをフックしました）。なぜこれが当てはまるのか、どのように解決できるのか、誰でも知っていますか？

編集： JSfiddleスニペットの簡略化されたバージョンhereを追加しました。本質的には、アニメーションをdivに2回再適用していますが、実際のアニメーションは最初に呼び出されるだけです。

Answer 1

私はそれを理解したと思います。 thisによれば、cssアニメーションは同じノードに2回適用されることはありません（アニメーションが異なる場合でも！）。だから私はノードをクローンし、オリジナルを削除し、クローンされたノードを追加しなければならなかった。

Answer 2

問題は、アニメーション化されたクラスを削除してから再度適用しても、1つのブロッキング関数の中でこれを行うことです。関数が終了すると、レンダリングエンジンは何も変更されていないように見えます。

1つの解決方法（選択したもの）は、要素を複製して元のデータを破棄することです。これは問題ありませんが、元の要素へのイベントバインディングがあれば、それらも破棄されます。

もう1つの方法は、要素からアニメーションクラスを削除してから、非常に小さな遅延でsetTimeout（）呼び出しの内部でクラスを再適用するコードをラップすることです。

$('#holder').removeClass('shader'); 
setTimeout(
    function(){$('#holder').addClass('shader')} 
    , 1); 

私は、このアプローチを使用するようにjsfiddleを微調整しました：http://jsfiddle.net/HuFBN/7/

Answer 3

css-tricks.comに2011 articleによると、削除してクラスを追加することの間でリフローをトリガして、アニメーションを再起動します。例（冗長）：

$('#holder').removeClass('shader'); 
$('#holder').offsetWidth = $('#holder').offsetWidth; // triggers reflow 
$('#holder').addClass('shader'); // restarts animation 

Answer 4

アニメーションを適用した直後にこれを使用してみてください - 「e」は、あなたのアニメーション要素であることを考える：あなたの要素を再作成する必要が

e.outerHTML = e.outerHTML; 

Answer 5

。

function resetAnimation(jqNode) { 
    var clone = jqNode.clone(); 
    jqNode.after(clone); 
    jqNode.remove(); 
    jqNode[0] = clone[0]; 
} 

Answer 6

アニメーションを含むクラスを削除してから、もう一度追加する必要があります。 .offsetWidthなしでも動作するはずです。それは私のために働いた。だから

$('#id').removeClass('animationClass'); 
$('#id').addClass('animationClass'); // starts animation again 

トリックを行う必要があります。