DOM

：

：

Animation：cancel イベント

　編集：2022.10.23 by T.A.

[Edge]。→、、

Animation.cancel() メソッドが呼び出されたとき、またはアニメーションが別の状態から「idle」再生状態に入ったときに発生します。或いは再生が終了する前に要素からアニメーションが削除された場合など。

注： 最初にアイドル状態の新しいアニメーションを作成しても、新しいアニメーションでキャンセル イベントはトリガーされません。

バブリング ¶なし
キャンセル可能 ¶いいえ
インターフェイス AnimationPlaybackEvent
イベント ハンドラー プロパティ oncancel
例
再生、一時停止、終了、中断

HTML： 

<DIV id=IdTest style="width:1em">■</DIV>
<BUTTON id=IdPlay>再生</BUTTON>
<BUTTON id=IdPause>一時停止</BUTTON>
<BUTTON id=IdEnd>終了</BUTTON>
<BUTTON id=IdCancel>中断</BUTTON>
<BR>
<SPAN id=IdLog></SPAN>

JavaScript： 

KF=new KeyframeEffect(  //キーフレームの指定：
  IdTest, 
  [
    {transform:'translateX(0)'}, {transform:'translateX(500px)'}  //X軸移動。
  ], 
  {duration:5000, fill:'forwards'}  //掛ける時間、？。
);
Ani=new Animation(KF, document.timeline);  //アニメーション再生。

function JobPlay(){  //「再生」ボタンが押された時の処理：
  IdLog.innerHTML="";  //表示。
  Ani.play();        //アニメーション再生。
}
function JobPause(){ //「一時停止」ボタンが押された時の処理：
  IdLog.innerHTML="";  //表示。
  Ani.pause();       //アニメーション一時停止。
}
function JobEnd(){  //「速度」ボタンが押された時の処理：
  IdLog.innerHTML="";  //表示。
  Ani.finish();       //アニメーション終了。
}
function JobCancel(){  //「中断」ボタンが押された時の処理：
  IdLog.innerHTML="";  //表示。
  Ani.cancel();       //アニメーション キャンセル。
}
IdPlay.onclick=JobPlay;      //ボタンにイベント割り当て。
IdPause.onclick=JobPause;    //ボタンにイベント割り当て。
IdEnd.onclick=JobEnd;        //ボタンにイベント割り当て。
IdCancel.onclick=JobCancel;  //ボタンにイベント割り当て。

function Job(eve){  //cancel イベントの処理：
  D=eve;  //＝[object]：[object AnimationPlaybackEvent]

詳細	//isTrusted＝[boolean]：true
	//currentTime＝[object]：null
	//timelineTime＝[number]：10584.955
	//type＝[string]：cancel
	//target＝[object]：[object Animation]
	//currentTarget＝[object]：[object Animation]
	//eventPhase＝[number]：0
	//bubbles＝[boolean]：false
	//cancelable＝[boolean]：false
	//defaultPrevented＝[boolean]：false
	//composed＝[boolean]：false
	//…


  IdLog.innerHTML="中断されました";  //表示。
}
Ani.oncancel=Job;

→KeyframeEffect()、new Animation()、play()、pause()、finish()、cancel()。

→CSS：transform。CSS：translateX()。duration、fill。

→click イベント、innerHTML。

→AnimationPlaybackEvent。

テスト