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

Browser	Transition Start Event	Transition End Event
W3C CSS Transitions Draft	Yes	Yes
Webkit	No	Yes
Mozilla	No	Yes
Opera	No	Yes
Internet Explorer	No	Yes

使用例

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

<div>

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

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