TransitionEvent

これは実験的な機能です。本番で使用する前にブラウザー実装状況をチェックしてください。

TransitionEvent インターフェイスは、トランジションに関する情報を提供するイベントを表します。

コンストラクター

TransitionEvent()
指定された引数で TransitionEvent イベントを作成します。

プロパティ

親である Event から継承したプロパティもあります。

TransitionEvent.propertyName 読取専用
DOMString で、トランジションに関連付けられた CSS プロパティの名前が入ります。
TransitionEvent.elapsedTime 読取専用
float で、このイベントが発生した時点でトランジションが実行している時間を秒単位で表します。この値は transition-delay プロパティの影響を受けません。
TransitionEvent.pseudoElement 読取専用
DOMString で、 :: で始まる、アニメーションが実行される擬似要素の名前が入ります。トランジションが擬似要素上ではなく要素上で実行されている場合は、空文字列 '' になります。

TransitionEvent の種類

transitioncancel
Event で、 CSS トランジションが中断されたときに発生します。
transitionend
Event で、 CSS トランジションの実行が終了したときに発生します。
transitionrun
Event で、 CSS トランジションが生成されたとき、実行中のトランジションに追加されたときに発生し、必ずしも開始時に発生するとは限りません。
transitionstart
Event で、 CSS トランジションの推移が開始したときに発生します。

メソッド

親である Event から継承したプロパティもあります。

TransitionEvent.initTransitionEvent()
非推奨の Document.createEvent("TransitionEvent") メソッドを使用して生成された TransitionEvent を初期化します。

仕様書

仕様書 状態 備考
CSS Transitions
TransitionEvent の定義
草案 初回定義

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
TransitionEvent
実験的
Chrome 完全対応 27
完全対応 27
未対応 2 — 71
接頭辞付き
接頭辞付き WebKit のベンダー接頭辞が必要
Edge 完全対応 12Firefox 完全対応 4IE 完全対応 10Opera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 あり
完全対応 あり
未対応 ? — 71
接頭辞付き
接頭辞付き WebKit のベンダー接頭辞が必要
Chrome Android 完全対応 27
完全対応 27
未対応 18 — 71
接頭辞付き
接頭辞付き WebKit のベンダー接頭辞が必要
Firefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 2.0
完全対応 2.0
未対応 1.0 — 10.0
接頭辞付き
接頭辞付き WebKit のベンダー接頭辞が必要
TransitionEvent() constructor
実験的
Chrome 完全対応 27Edge 完全対応 79Firefox 完全対応 23IE 未対応 なしOpera 完全対応 ありSafari 未対応 なしWebView Android 完全対応 ありChrome Android 完全対応 27Firefox Android 完全対応 23Opera Android 完全対応 ありSafari iOS 未対応 なしSamsung Internet Android 完全対応 2.0
animationName
実験的
Chrome 未対応 なしEdge 未対応 12 — 79Firefox 完全対応 4IE 完全対応 10Opera 完全対応 ありSafari 完全対応 ありWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 未対応 なし
elapsedTime
実験的
Chrome 完全対応 2Edge 完全対応 12Firefox 完全対応 4IE 完全対応 10Opera 完全対応 ありSafari 完全対応 6WebView Android 完全対応 ありChrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 1.0
initTransitionEvent
非推奨非標準
Chrome 未対応 なし
補足
未対応 なし
補足
補足 Removal version unknown.
Edge 未対応 12 — 79Firefox 未対応 6 — 23IE 完全対応 10Opera 未対応 なし
補足
未対応 なし
補足
補足 Removal version unknown.
Safari 完全対応 ありWebView Android 未対応 なし
補足
未対応 なし
補足
補足 Removal version unknown.
Chrome Android 未対応 なし
補足
未対応 なし
補足
補足 Removal version unknown.
Firefox Android 未対応 6 — 23Opera Android 未対応 なし
補足
未対応 なし
補足
補足 Removal version unknown.
Safari iOS 完全対応 ありSamsung Internet Android 未対応 なし
補足
未対応 なし
補足
補足 Removal version unknown.
propertyName
実験的
Chrome 完全対応 2Edge 完全対応 12Firefox 完全対応 ありIE ? Opera 完全対応 ありSafari 完全対応 6WebView Android 完全対応 ありChrome Android 完全対応 18Firefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 1.0
pseudoElement
実験的
Chrome 完全対応 2Edge 完全対応 79Firefox 完全対応 23IE 未対応 なしOpera 完全対応 ありSafari 完全対応 6WebView Android 完全対応 ありChrome Android 完全対応 18Firefox Android 完全対応 23Opera Android 完全対応 ありSafari iOS 未対応 なしSamsung Internet Android 完全対応 1.0

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
非標準。ブラウザー間の互換性が低い可能性があります。
非標準。ブラウザー間の互換性が低い可能性があります。
非推奨。新しいウェブサイトでは使用しないでください。
非推奨。新しいウェブサイトでは使用しないでください。
実装ノートを参照してください。
実装ノートを参照してください。
使用するには、ベンダー接頭辞または異なる名前が必要です。
使用するには、ベンダー接頭辞または異なる名前が必要です。

関連情報