CSS3 アニメーションの完了後にコールバック関数をトリガーするにはどうすればよいですか?

CSS3 アニメーションはコールバック関数をトリガーできますか?

JavaScript アニメーションとは異なり、CSS3 アニメーションは本質的にコールバック関数を実行する直接メカニズムを提供しません。完了。ただし、イベント リスナーを利用する解決策があります。

JavaScript フレームワークを使用した実装

たとえば、jQuery を使用すると、イベント リスナーをアタッチして完了をキャプチャできます。イベントを呼び出してコールバック関数を呼び出します:

$("#sun").bind('oanimationend animationend webkitAnimationEnd', function() {
    alert("fin");
});

を使用した実装純粋な JavaScript

純粋な JavaScript を使用する場合、次のコード スニペットは、さまざまなアニメーション終了イベントのイベント リスナーを追加する方法を示しています。

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

考慮事項

CSS3 アニメーション イベントに対するブラウザのサポートはさまざまであることに注意してください。上記のコード スニペットで使用されているイベント名は、幅広いブラウザーをカバーしており、互換性が確保されています。

デモ

ライブ デモについては、この JSFiddle にアクセスしてください: http:/ /jsfiddle.net/W3y7h/

以上がCSS3 アニメーションの完了後にコールバック関数をトリガーするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。