CSS3 トランジション イベントについて

CSS3 トランジションを使用すると、Web 要素でスムーズなアニメーションと視覚効果を実現できます。ユーザー エクスペリエンスを向上させ、アクションをこれらの遷移と同期させるには、遷移の進行状況を監視することが重要です。この記事では、CSS3 がトランジションの開始時または終了時にチェックするイベントを提供しているかどうかという問題について説明します。

W3C CSS Transitions Draft

W3C CSS Transitions Draft では、 CSS 遷移は、対応する DOM イベントをトリガーします。遷移するプロパティごとにイベントが生成されます。これにより、開発者は遷移の完了と同時にアクションを実行できるようになります。

WebKit

WebKit では、遷移が完了すると webkitTransitionEnd イベントが発生します。このイベントの JavaScript イベント リスナーを設定すると、開発者は完了をキャッチできるようになります。

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

Mozilla、Opera、Internet Explorer

ほとんどのブラウザは移行完了の単一イベントをサポートしています:

• Firefox : トランジションエンド
• オペラ: oトランジションエンド
• WebKit: webkitTransitionEnd
• Internet Explorer:transitionend

Internet Explorer では、transitionend イベントは、移行が正常に完了した場合にのみ発生します。早期に削除すると、イベントがトリガーされなくなります。

Bringing It Together

ブラウザに基づいて適切なイベントを活用し、JavaScript イベント リスナーを使用することで、開発者はCSS3 トランジションの進行状況を確認し、その完了と同期して必要なアクションを実行します。