DOM

：

：

Window：transitionstart イベント

　編集：2022.10.18 by T.A.

[Edge]。→、、

ウインドウ内で CSS トランジションが実際の動作が開始されたときに発行されます。

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

→HTMLElement：transitionstart イベント。

例
transitionstart、transitionend イベント

HTML： 

<DIV id=IdAni style="width:1em">■</DIV>
<SPAN id=IdLog></SPAN>

JavaScript： 

function JobS(eve){  //transitionstart イベントの処理：
  D=eve;  //＝[object]：[object TransitionEvent]。全ての動作終了後の値。

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


  IdLog.innerHTML=IdLog.innerHTML+"開始 ";
}
function JobE(eve){  //transitionend イベントの処理：
  DA=eve;  //＝[object]：[object TransitionEvent]。全ての変化が終了後の値。

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


  IdLog.innerHTML=IdLog.innerHTML+"終了 ";
}
window.ontransitionstart=JobS;  //イベント割り当て。
window.ontransitionend=JobE;    //イベント割り当て。
IdAni.style.transition="all 5s linear 1s";  //トランジション割り当て。全てのプロパティを対象で、1秒後に5秒掛けて、直線時間的に変化させる。
IdAni.style.transform="translateX(200px)";  //X軸方向に移動。
IdAni.style.color="red";                    //色変化。

各プロパティの変化毎に“開始”、“終了”が起こるようだ。

テスト