CSS3 トランジションの開始と終了をどのように検出しますか?

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

CSS3 トランジションを使用する場合、トランジションがいつ開始または終了したかを知ると役立つことがよくあります。 CSS3 では、これらの遷移を示すために要素によって起動されるさまざまなイベントがあります。

CSS Transition End Event

定義:
transitionendイベントは、指定されたプロパティの CSS 遷移が完了するとトリガーされます。

構文:

element.addEventListener('transitionend', callbackFunction, { once: true });

例:

const box = document.querySelector('.box');

box.addEventListener('transitionend', function(e) {
  console.log(`Transition for property ${e.propertyName} has ended.`);
}, { once: true });

その他の遷移イベント

一部のブラウザでは、transitionend イベント以外にも追加のイベントが提供されます:

Webkit 固有のイベント:

• webkitTransitionStart: CSS トランジションの開始時にトリガーされます。
• webkitTransitionRun: CSS トランジション中に複数回トリガーされます。

Mozilla 固有のイベント:

• transitionstart: プロパティの CSS トランジションが開始するとトリガーされます。

Opera 固有のイベント:

• oTransitionStart: プロパティの CSS トランジションが開始されるときにトリガーされます。

インターネットExplorer イベント:

• MSTransitionEnd: プロパティの CSS トランジションが終了するとトリガーされます。

ブラウザの互換性

上記のイベントは、W3C CSS Transitions Draft および各ブラウザのドキュメントで提供されている仕様に従って、さまざまなブラウザでサポートされています。

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