トランジションエンドイベント
例
CSS遷移が終了したら、<div>要素を使用して何かを実行します。
// Code for Safari 3.1 to 6.0
document.getElementById("myDIV").addEventListener("webkitTransitionEnd", myFunction);
// Standard syntax
document.getElementById("myDIV").addEventListener("transitionend", myFunction);
定義と使用法
transitionendイベントは、CSS遷移が完了したときに発生します。
注: CSSのtransition-propertyプロパティが削除された場合など、遷移が完了する前に削除された場合 、transitionendイベントは発生しません。
CSSトランジションの詳細については、 CSS3トランジションに関するチュートリアルを参照してください。
ブラウザのサポート
表の数字は、イベントを完全にサポートする最初のブラウザーバージョンを示しています。
「webkit」、「moz」、または「o」が後に続く数字は、プレフィックスで機能した最初のバージョンを指定します。
Event | |||||
---|---|---|---|---|---|
transitionend | 26.0 4.0 (webkitTransitionEnd) |
10.0 | 16.0 4.0 (mozTransitionEnd) |
6.1 3.1 (webkitTransitionEnd) |
12.1 10.5 (oTransitionEnd) |
構文
object.addEventListener("webkitTransitionEnd", myScript); // Code for Safari 3.1 to 6.0
object.addEventListener("transitionend", myScript); // Standard syntax
注: addEventListener ()メソッドは、Internet Explorer8以前のバージョンではサポートされていません。
技術的な詳細
泡: | はい |
---|---|
キャンセル可能: | はい |
イベントタイプ: | TransitionEvent |
DOMバージョン: | レベル3のイベント |
関連ページ
CSSチュートリアル:CSS3トランジション
CSSリファレンス:CSS3トランジションプロパティ
CSSリファレンス:CSS3transition-propertyプロパティ