DOM

：

：

Document：transitionend イベント

　編集：2022.10.11 by T.A.

[Edge]。→、

が完了したときに発行されます。

トランジションが完了前に削除された場合、例えば transition-property が削除されたり、display が none に設定されたりした場合、イベントは生成されません。

バブリング あり
キャンセル可能 はい
インターフェイス TransitionEvent
イベント ハンドラー プロパティ ontransitionend

transitionend イベントは二つの方向で発生します。― トランジション終了の状態まで遷移し終わったときと、既定またはトランジションがない状態まで完全に戻ったときです。トランジションに待ち時間や実行時間がない場合、両方が 0 秒またはどちらも宣言されていなかった場合、トランジションは発生せず、トランジション イベントは発生しません。transitioncancel イベントが発生すると、transitionend イベントは発生しません。

このイベントの本来の対象は、トランジションが適用された Element です。このイベントを Document インターフェイス上で待ち受けし、キャプチャやバブリングの局面で処理することができます。このイベントについて完全な詳細は、HTMLElement：transitionend イベントを参照してください。

例
スタイルシート（transition 使用）でアニメーション

HTML： 

<SPAN id=IdTest style="
  position:relative;
  left:0; font-size:30px;
  transition:all 3s 2s;
 ">■</SPAN><BR>
<SPAN id=IdLog></SPAN><BR>

JavaScript： 

function JobS(eve){ //transitionstart イベントの処理。
  D=eve;
  IdLog.innerHTML=IdLog.innerHTML+"●"; //表示。
}
function JobE(eve){ //transitionend イベントの処理。
  DA=eve; //＝[object]：[object TransitionEvent]。2回目のデータ。

詳細	//isTrusted＝[boolean]：true
	//propertyName＝[string]：left
	//elapsedTime＝[number]：3
	//pseudoElement＝[string]：
	//type＝[string]：transitionend
	//target＝[object]：[object HTMLSpanElement]
	//currentTarget＝[object]：null
	//eventPhase＝[number]：0
	//bubbles＝[boolean]：true
	//cancelable＝[boolean]：true
	//defaultPrevented＝[boolean]：false
	//composed＝[boolean]：false
	//…


  IdLog.innerHTML=IdLog.innerHTML+"○"; //表示。
}
document.ontransitionstart=JobS; //イベント割り当て。
document.ontransitionend=JobE;   //イベント割り当て。
IdTest.style.left="100px";    //水平軸 100px 移動。
IdTest.style.fontSize="10px"; //フォントサイズを 10px へ。

イベントが2回発生。

→CSS：transition プロパティ

テスト