CSS3 トランジションの開始と終了を検出するにはどうすればよいですか?

CSS3 トランジション イベントの検出

CSS3 のトランジションは、Web 要素に動的な効果を追加し、応答性を高めます。ただし、多くの場合、他の要素やアクションと同期するために、これらのトランジションの開始と終了を追跡する必要があります。

回答

W3C CSS Transitions Draft

W3C CSS Transitions Draft では次のように指定されています。つまり、遷移が発生するプロパティごとに完了イベントが発生します。このイベントを使用すると、開発者は遷移の完了を検出し、同期されたアクションを実行できます。

Webkit

Webkit では、webkitTransitionEnd イベントにイベント リスナー関数を設定できます。このイベントは、トランジションの終了時に発生します。

box.addEventListener('webkitTransitionEnd', function( event ) { alert( "Finished transition!" ); }, false );

Mozilla、Opera、Internet Explorer

これらのブラウザは、同じtransitionend イベントをサポートしていますが、 Opera の場合は「o」、Internet Explorer の場合は「webkit」という接頭辞が付きます。イベントはトランジションの完了時に発生します。

CSS トランジション イベントとブラウザ間での互換性の詳細については、CSS3 トランジション関数の正規化に関するスタック オーバーフローのディスカッションを参照してください。

以上がCSS3 トランジションの開始と終了を検出するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。