TransitionEvent

Experimental

これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

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

コンストラクター

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

プロパティ

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

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

TransitionEvent の種類

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

メソッド

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

TransitionEvent.initTransitionEvent() (en-US) この API は標準化されていません。 これは非推奨の API です。まだ動作しているかもしれませんが、もう使用するべきではありません。
非推奨の Document.createEvent("TransitionEvent") メソッドを使用して生成された TransitionEvent を初期化します。

仕様書

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

ブラウザーの互換性

BCD tables only load in the browser

関連情報