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

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

コールバックをすぐにサポートする JavaScript アニメーションとは異なり、CSS3 アニメーションには当初この機能がありませんでした。ただし、イベント リスナーを使用することで、CSS3 アニメーションのコールバックを実装できるようになりました。

イベントベースのコールバックの実装

CSS3 でコールバックを実現するための鍵アニメーションを聞くことができるイベントとして認識することです。関連する DOM 要素にイベント リスナーを追加すると、アニメーションの完了時にコールバックを実行できます。

jQuery イベント バインディング

jQuery を使用すると、イベント リスナーをバインドできます。アニメーション要素は次のようになります:

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

これにより、イベント リスナーが 3 つの可能なイベント タイプにバインドされます。 oanimationend、animationend、webkitAnimationEnd。初期イベントには、さまざまなブラウザーとの互換性を確保するためにベンダー プレフィックスが付けられます。

純粋な JavaScript イベント バインディング

jQuery を使用したくない場合は、純粋な JavaScript を使用して次のことを行うことができます。イベント リスナーを追加:

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

このアプローチでは、ネイティブ JavaScript を使用して同じ結果が得られます。 code.

デモとブラウザの互換性

このコールバック実装のライブ デモは http://jsfiddle.net/W3y7h/ で入手できます。最新のブラウザのほとんどはこれらのイベント タイプをサポートしていますが、コールバックを実装するときは、ブラウザ間の互換性を常に確認することをお勧めします。

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