3

多くの人がCSS3アニメーションを再起動する必要があります。まあ私は正反対が欲しい：

適切なcssクラスを追加してアニメーションを開始すると、アニメーションが開始されます。次に、一連のparentNode.insertBefore呼び出しを使用して（そしてまったく同じノードインスタンスを再利用して）コンテナを並べ替えると、アニメーションは毎回再起動します。

この動作を防ぐために私にできることはありますか？

この動作を示すフィドルは次のとおりです。http：//jsfiddle.net/v66G5/17/

[すべて追加]をクリックし、アニメーションを数秒間再生してから、[シャッフル]をクリックします。移動したノードはすべてアニメーションを再開します。

container.insertBefore(node, childrenClone[Math.floor(Math.random() * childrenClone.length)]);
4

2 に答える 2

1

http://dev.w3.org/csswg/css3-animations/から取得

ドキュメントの読み込み後にスタイルを変更して要素に指定されたアニメーションは、スタイルが解決されたときに開始されます。これは、ホバーなどの疑似スタイルルールの場合はすぐに発生する場合もあれば、スクリプトエンジンがブラウザに制御を返す場合（スクリプトによって適用されるスタイルの場合）の場合もあります。

要素に有効なキーフレームルールを参照する'animation-name'の値がある場合、アニメーションが要素に適用されます。アニメーションが開始されると、終了するか、「animation-name」が削除されるまで続行されます。キーフレームとアニメーションプロパティに使用される値は、アニメーションの開始時にスナップショットが作成されます。アニメーションの実行中にそれらを変更しても効果はありません

ノードを削除して挿入すると、要素がスタイルを再計算するため、単純なcssでは必要なことが可能になるとは思いません。

jQueryを使用してそれを実現するための可能な方法は、ノードを削除するときに不透明度とアニメーションの終了までの残り時間をスナップショットし、ノードを挿入した後に元に戻すことです（つまり、10秒間のアニメーションの場合、シャッフルがクリックされた場合は5秒間後に） 、50％の不透明度から開始し、アニメーションの継続時間は5秒です）

于 2013-02-04T17:22:07.980 に答える
1

代わりに CSS の位​​置をシャッフルできるのに、なぜ DOM 要素を操作するのでしょうか?

http://jsfiddle.net/v66G5/19/

children.each(function() {
    var $node = $(this),
        $node2 = $(children[Math.floor(Math.random() * children.length)]),
        tmp = $node.position().top;

    $node.css("top", $node2.position().top + 'px');
    $node2.css("top", tmp + 'px');
});
于 2013-01-30T02:25:18.510 に答える