TransitionEvent インターフェイスは、トランジションに関する情報を提供するイベントを表します。
コンストラクター
TransitionEvent()- 指定された引数で
TransitionEventイベントを作成します。
プロパティ
親である Event から継承したプロパティもあります。
TransitionEvent.propertyName読取専用DOMStringで、トランジションに関連付けられた CSS プロパティの名前が入ります。TransitionEvent.elapsedTime読取専用floatで、このイベントが発生した時点でトランジションが実行している時間を秒単位で表します。この値はtransition-delayプロパティの影響を受けません。TransitionEvent.pseudoElement読取専用DOMStringで、::で始まる、アニメーションが実行される擬似要素の名前が入ります。トランジションが擬似要素上ではなく要素上で実行されている場合は、空文字列''になります。
TransitionEvent の種類
transitioncancelEventで、 CSS トランジションが中断されたときに発生します。transitionendEventで、 CSS トランジションの実行が終了したときに発生します。transitionrunEventで、 CSS トランジションが生成されたとき、実行中のトランジションに追加されたときに発生し、必ずしも開始時に発生するとは限りません。transitionstartEventで、 CSS トランジションの推移が開始したときに発生します。
メソッド
親である Event から継承したプロパティもあります。
TransitionEvent.initTransitionEvent()- 非推奨の
Document.createEvent("TransitionEvent")メソッドを使用して生成されたTransitionEventを初期化します。
仕様書
| 仕様書 | 状態 | 備考 |
|---|---|---|
| CSS Transitions TransitionEvent の定義 |
草案 | 初回定義 |
ブラウザーの互換性
このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。
Update compatibility data on GitHub
| デスクトップ | モバイル | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
TransitionEvent | Chrome
完全対応
27
| Edge 完全対応 12 | Firefox 完全対応 4 | IE 完全対応 10 | Opera 完全対応 あり | Safari 完全対応 あり | WebView Android
完全対応
あり
| Chrome Android
完全対応
27
| Firefox Android 完全対応 4 | Opera Android 完全対応 あり | Safari iOS 完全対応 あり | Samsung Internet Android
完全対応
2.0
|
TransitionEvent() constructor | Chrome 完全対応 27 | Edge 完全対応 79 | Firefox 完全対応 23 | IE 未対応 なし | Opera 完全対応 あり | Safari 未対応 なし | WebView Android 完全対応 あり | Chrome Android 完全対応 27 | Firefox Android 完全対応 23 | Opera Android 完全対応 あり | Safari iOS 未対応 なし | Samsung Internet Android 完全対応 2.0 |
animationName | Chrome 未対応 なし | Edge 未対応 12 — 79 | Firefox 完全対応 4 | IE 完全対応 10 | Opera 完全対応 あり | Safari 完全対応 あり | WebView Android 未対応 なし | Chrome Android 未対応 なし | Firefox Android 完全対応 4 | Opera Android 完全対応 あり | Safari iOS 完全対応 あり | Samsung Internet Android 未対応 なし |
elapsedTime | Chrome 完全対応 2 | Edge 完全対応 12 | Firefox 完全対応 4 | IE 完全対応 10 | Opera 完全対応 あり | Safari 完全対応 6 | WebView Android 完全対応 あり | Chrome Android 完全対応 18 | Firefox Android 完全対応 4 | Opera Android 完全対応 あり | Safari iOS 完全対応 あり | Samsung Internet Android 完全対応 1.0 |
initTransitionEvent | Chrome
未対応
なし
| Edge 未対応 12 — 79 | Firefox 未対応 6 — 23 | IE 完全対応 10 | Opera
未対応
なし
| Safari 完全対応 あり | WebView Android
未対応
なし
| Chrome Android
未対応
なし
| Firefox Android 未対応 6 — 23 | Opera Android
未対応
なし
| Safari iOS 完全対応 あり | Samsung Internet Android
未対応
なし
|
propertyName | Chrome 完全対応 2 | Edge 完全対応 12 | Firefox 完全対応 あり | IE ? | Opera 完全対応 あり | Safari 完全対応 6 | WebView Android 完全対応 あり | Chrome Android 完全対応 18 | Firefox Android 完全対応 あり | Opera Android 完全対応 あり | Safari iOS 完全対応 あり | Samsung Internet Android 完全対応 1.0 |
pseudoElement | Chrome 完全対応 2 | Edge 完全対応 79 | Firefox 完全対応 23 | IE 未対応 なし | Opera 完全対応 あり | Safari 完全対応 6 | WebView Android 完全対応 あり | Chrome Android 完全対応 18 | Firefox Android 完全対応 23 | Opera Android 完全対応 あり | Safari iOS 未対応 なし | Samsung Internet Android 完全対応 1.0 |
凡例
- 完全対応
- 完全対応
- 未対応
- 未対応
- 実装状況不明
- 実装状況不明
- 実験的。動作が変更される可能性があります。
- 実験的。動作が変更される可能性があります。
- 非標準。ブラウザー間の互換性が低い可能性があります。
- 非標準。ブラウザー間の互換性が低い可能性があります。
- 非推奨。新しいウェブサイトでは使用しないでください。
- 非推奨。新しいウェブサイトでは使用しないでください。
- 実装ノートを参照してください。
- 実装ノートを参照してください。
- 使用するには、ベンダー接頭辞または異なる名前が必要です。
- 使用するには、ベンダー接頭辞または異なる名前が必要です。