8

javascript (タイムアウト、間隔) と css (アニメーション、遅延) のタイミングは同期していますか?

例えば ​​：

#anim1 {
animation: anim1 10s linear;
display: none;
}

anim1.style.display = "block" ;
setTimeout(function() {
 anim2.style.webkitAnimation= 'anim2 10s linear';
}, 10000);

anim2は anim1 の最後に正確にトリガーされますか? ブラウザによって違うの？この場合、私は Webkit のフォーカスにもっと興味があります。

読み込み時間の不一致を避けるために、anim1 は JavaScript を介してトリガーされることに注意してください。

NB : これは理論的な質問です。上記のコードは例であり、自宅で使用しないでください。より適切な方法があるためです。

4

2 に答える 2

5

私の知る限り、保証はありません。ただし、リッスンできるイベントがあります。

anim1.addEventListener('animationend',function(){
    anim2.style.webkitAnimation= 'anim2 10s linear';
}

これらは新しいものであるため、考慮する必要があるベンダー プレフィックスがまだあることに注意してください。webkitAnimationEndおよびoanimationendWebkit と Opera の場合。

また、私の元の回答が（間違って）示唆transitionendしたように、アニメーションの代わりに CSS トランジションを使用する場合は、（同様のプレフィックスを使用して）あります。

于 2013-06-09T14:57:15.643 に答える
2

これは間違った方法です。それらが同期しているという保証はありませんが、近い可能性があります。

アニメーションの繰り返しの開始、終了にはイベントが用意されています。

https://developer.apple.com/documentation/webkitjs/webkitanimationevent詳細はこちら。

次のようなコードを使用します。

element.addEventListener("webkitAnimationEnd", callfunction,false);

それにバインドします。

于 2013-06-09T14:57:03.250 に答える