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

CSS3 トランジション イベント

CSS3 トランジションは、Web ページにアニメーションや効果を追加するシームレスな方法を提供します。ただし、これらのアニメーションを効果的に制御して同期するには、アニメーションがいつ開始され、いつ終了するかを知ることが不可欠です。 CSS3 トランジション イベントを入力します。

イベント タイプ

使用しているブラウザによっては、CSS3 トランジションの開始時または終了時にさまざまなイベントが発生します。

• W3C CSS トランジション ドラフト:

  • transitionstart (開始)
  • transitionend (終了)

• Webkit:

  • webkitTransitionEnd (終了)

• Mozilla:

  • transitionend (終了)

• Opera:

  • oTransitionEnd (終了)

• Internet Explorer:

  • transitionend (終了)

イベントのリッスン

CSS3 遷移イベントをリッスンするには、JavaScript イベント リスナーを使用できます。

element.addEventListener('transitionend', function(event) {
  // Transition completed
});

ブラウザの互換性

CSS3 遷移イベントを使用できるかどうかは、ブラウザによって異なります。互換性情報については、以下の表を参照してください。

使用例

次のコードは、transitionend を使用して CSS3 トランジションの完了をリッスンする方法を示しています。

<div>

#box 要素の上にマウスを置くと、トランジションにより幅が 200 ピクセルまでスムーズにアニメーション化されます。トランジションが終了すると、transitionend イベントが発生します。

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