TransitionEvent

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

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

Event TransitionEvent

コンストラクター

TransitionEvent()

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

インスタンスプロパティ

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

TransitionEvent.propertyName 読取専用

文字列で、このトランジションに関連付けられた CSS プロパティの名前が入ります。

TransitionEvent.elapsedTime 読取専用

float で、このイベントが発生した時点でトランジションが実行している時間を秒単位で表します。この値は transition-delay プロパティの影響を受けません。

TransitionEvent.pseudoElement 読取専用

文字列で、 :: で始まる、アニメーションが実行される擬似要素の名前が入ります。トランジションが擬似要素上ではなく要素上で実行されている場合は、空文字列 '' になります。

TransitionEvent の種類

transitioncancel

Event で、 CSS トランジションが中断されたときに発生します。

transitionend

Event で、 CSS トランジションの実行が終了したときに発生します。

transitionrun

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

transitionstart

Event で、 CSS トランジションの推移が開始したときに発生します。

インスタンスメソッド

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

仕様書

Specification
CSS Transitions
# interface-transitionevent

ブラウザーの互換性

BCD tables only load in the browser

関連情報