CSS3 遷移トリガーを検出する方法: 包括的なガイド

CSS3 トランジション トリガーの検出: 包括的な概要

CSS3 では、トランジションは要素の変化をアニメーション化する際に重要な役割を果たします。遷移の状態を監視するには、遷移がいつ開始または終了するかを決定するために要素によって起動されるイベントがあるかどうかを疑問に思うかもしれません。

W3C CSS Transition Draft

によるとW3C CSS Transitions Draft では、CSS Transition が完了すると、対応する DOM イベントがトリガーされます。遷移中のプロパティごとに、特定のイベントが発生します。このイベント メカニズムを使用すると、開発者はアクションと遷移の完了を同期できます。

Webkit

Webkit ブラウザは、WebKitTransitionEvent のインスタンスである webkitTransitionEnd イベントを提供します。このイベントの JavaScript イベント リスナーを設定して、遷移がいつ完了したかを知ることができます。

box.addEventListener( 'webkitTransitionEnd',
    lambda event: print("Finished transition!"), #handle transition
    False
)

Mozilla

Firefox と Opera は、それぞれ、transitionend イベントと oTransitionEnd イベントを使用します。 、遷移の終了を知らせます。起動される 1 つのイベントは、変更されるすべてのプロパティをカバーします。

Opera

Opera には、遷移イベント oTransitionEnd が 1 つだけあり、遷移が終了すると発生します。

Internet Explorer

Internet Explorer では、移行が完了するとトリガーされるtransitionend イベントも提供します。ただし、遷移が終了する前に削除された場合、イベントは送出されません。

ブラウザ間の正規化

ブラウザ間で一貫したイベント処理を行うには、次の使用を検討してください。 Modernizr や jQuery などのクロスブラウザー ライブラリ。これらのライブラリは、トランジションを含むさまざまな CSS3 プロパティの正規化されたイベント バインディングを提供します。

以上がCSS3 遷移トリガーを検出する方法: 包括的なガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。