TransitionEvent

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

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

コンストラクター

TransitionEvent() (en-US)

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

プロパティ

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

TransitionEvent.propertyName (en-US) 読取専用

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) Non-standard 非推奨

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

仕様書

Specification
CSS Transitions
# interface-transitionevent

ブラウザーの互換性

BCD tables only load in the browser

関連情報