11

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
}

jqueryを使用してスタイル(シェーダー+アニメーション)を動的に設定/設定解除しようとしてい$('#holder').addClass('shader');ます$('#holder').removeClass('shader');

ただし、奇妙なことに、クラスをリセットすると (たとえば、removeClass の後に addClass を呼び出す)、シェーダーのみが再適用されますが、アニメーションは再適用されません (アニメーションがいつ開始されるかを確認するために AnimationStart イベントをフックしました)。なぜこれが当てはまるのか、どうすれば解決できるのか誰にも分かりますか?

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

4

9 に答える 9

26

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

1 つの解決策 (選択したもの) は、要素を複製して元の要素を破棄することです。これは問題ありませんが、元の要素へのイベント バインディングがあれば (私はそう思います)、それらも破棄されます。

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

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

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

于 2013-05-17T23:42:24.113 に答える
4

私はそれを理解したと思います。thisによると、css アニメーションを同じノードに 2 回適用することはできません (別のアニメーションがある場合でも!)。そのため、ノードを複製し、元のノードを削除して、複製したノードを追加し直す必要がありました。

于 2013-04-17T05:19:07.230 に答える
1

要素を再作成する必要があります。

function resetAnimation(jqNode) {
   var clone = jqNode.clone();
   jqNode.after( clone );
   jqNode.remove();
   jqNode[0] = clone[0];
}
于 2015-10-09T19:24:43.620 に答える
0

リフローをトリガーする方法:

  element.classList.remove("class");
  element.scrollBy(0, 0);
  element.classList.add("class");

厳格なモードで動作します! 読み取り専用の値に対する書き込み操作は必要ありません! まったく新しい機能は必要ありません。一行で行く！:)

于 2019-03-28T22:04:10.160 に答える