DOM イベントを使用して CSS3 移行の進行状況を監視するにはどうすればよいですか?

CSS3 遷移イベント: DOM イベントによる遷移の進行状況の監視

CSS3 では、遷移により、オブジェクトのプロパティを変更するためのスムーズでアニメーション化された方法が提供されます。時間の経過とともに要素が変化します。遷移の進行状況を追跡するには、DOM イベントを利用して遷移の開始時と終了時を検出できます。

W3C 標準

W3C CSS Transitions Draft では DOM が定義されています。遷移の完了時にトリガーされるイベント。このイベントは、遷移が発生する各プロパティに固有です。

WebKit (Safari、Chrome、Opera)

WebKit ブラウザの場合、遷移時に webkitTransitionEnd イベントが発生します。完了します。このイベントは、遷移されたプロパティなど、遷移に関する情報を提供します。

Mozilla (Firefox)

Mozilla では、transitionend イベントは webkitTransitionEnd と同じ目的を果たします。イベント タイプは、Firefox、Opera、WebKit 間で一貫しています。

Opera

Opera は、遷移の完了時に発生する oTransitionEnd イベントもサポートしています。

Internet Explorer

Internet Explorer遷移が完了すると、transitionend イベントをトリガーします。完了前にトランジションが削除された場合、イベントは発生しないことに注意することが重要です。

使用例

JavaScript を使用して CSS3 トランジションの進行状況を監視するには、イベント リスナーを適切な DOM イベントにアタッチできます。例:

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

これらの遷移イベントを利用することで、開発者はアクションを CSS3 遷移の完了と同期させ、より応答性が高く魅力的なユーザー インターフェイスを作成できます。

以上がDOM イベントを使用して CSS3 移行の進行状況を監視するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。