DOM

：

：

Window：animationcancel イベント

　編集：2022.10.18 by T.A.

[Edge]。→、、

ウインドウ内で、mdn： CSS アニメーションが予期せず中断されたときに発生します。

言い換えれば、animationend イベントを送出せずに実行が停止するときはいつでもです。これは animation-name が変更されてアニメーションが削除されたり、動いているノードが CSS を使用して非表示にされた場合などに起こることがあります。したがって、直接または原因として、その包含ノードのいずれかが隠されています。／Document：animationcancel

mdn： このイベントのイベントハンドラーは onanimationcancel プロパティを設定するか、addEventListener() を使用することにより追加することができます。／Document：animationcancel

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

→HTMLElement：animationcancel イベント。

例
animationstart、animationend、animationcancel イベント

以下のCSSが組み込んであります： 


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


 
JavaScript：
 
function JobS(eve){  //animationstart イベントの処理：
  D=eve;  //＝[object]：[object AnimationEvent]

詳細	//isTrusted＝[boolean]：true
	//animationName＝[string]：TestKF
	//elapsedTime＝[number]：0
	//pseudoElement＝[string]：
	//type＝[string]：animationstart
	//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){  //animationend イベントの処理：
  DA=eve;  //＝[object]：[object AnimationEvent]

詳細	//isTrusted＝[boolean]：true
	//animationName＝[string]：TestKF
	//elapsedTime＝[number]：5
	//pseudoElement＝[string]：
	//type＝[string]：animationend
	//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 JobC(eve){  //animationcancel イベントの処理：
  DA=eve;  //＝[object]：[object AnimationEvent]。スクリプトで中断？させた。

詳細	//isTrusted＝[boolean]：true
	//animationName＝[string]：TestKF
	//elapsedTime＝[number]：2.154922
	//pseudoElement＝[string]：
	//type＝[string]：animationcancel
	//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.onanimationstart=JobS;  //イベント割り当て。
window.onanimationend=JobE;  //イベント割り当て。
//window.onanimationcancel=JobC;  //イベント割り当て。
window.addEventListener('animationcancel', JobC);  //イベント割り当て。
IdAni.style.animation="5s linear 1s TestKF";  //アニメーション割り当て。1秒後に5秒掛けて、直線時間的にアニメーションをする。


 
JavaScript： 再度アニメーション中断させる？。
 
IdAni.style.animation="";


 
onanimationcancel では中断できなかった。









テスト