CSS3 トランジションの正確な開始と終了を監視するにはどうすればよいでしょうか?

CSS3 遷移イベント: 遷移を正確に監視する

質問: CSS3 遷移の開始時期を正確に判断するにはどうすればよいですか?それとも終了しますか?

答え:

CSS トランジションが完了すると、対応する DOM イベントがトリガーされます。遷移中の各プロパティは個別のイベントを生成します。このメカニズムにより、開発者はアクションを遷移の完了と同期させることができます。

ブラウザ固有のイベント:

• W3C: 遷移起動の完了'transitionend' イベント。
• Webkit: 'webkitTransitionEnd' イベントは、トランジションの終了を通知します。
• Mozilla: 'transitionend' イベントが発生します遷移の完了時。
• Opera: 'oTransitionEnd' イベントは、遷移の終了をマークします。
• Internet Explorer: 'transitionend' イベント遷移の完了時にトリガーされます。

実装例:

Webkit で遷移の完了を監視するには、次のコードを使用します:

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

注:

遷移イベントの利用可能性と動作はブラウザーによって異なる場合があります。したがって、これらのイベントを使用する場合は、ブラウザーの互換性を考慮することが不可欠です。

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