DOM

：

：

AnimationPlaybackEvent コンストラクター

　編集：2022.10.24 by T.A.

[Edge]。→、、

新しい AnimationPlaybackEvent オブジェクトのインスタンスを返します。

構文
new AnimationPlaybackEvent(type[, options])
type イベント名の文字列。大文字と小文字が区別されます。これらの何れか：cancel、finish、remove。
options オブジェクト。Event() で定義されたプロパティに加えて、次のプロパティがあります：
detail 任意。イベントに関連付けられたイベント依存の値。初期値 null。¶イベント ハンドラー処理で利用される（¶指定しても得られなかった）。
戻り値

新しい AnimationPlaybackEvent オブジェクト。

例
簡単なアニメーション

HTML： 

<DIV id=IdTest style="width:1em">■</DIV>
<BUTTON id=IdCancel>中止</BUTTON><BR>
<SPAN id=IdLog></SPAN>

JavaScript： 

KE=new KeyframeEffect(  //アニメーション効果：
  IdTest,  //ターゲット要素。
  [        //キーフレーム。
    {transform:'translateX(0)'}, {transform:'translateX(200px)'}  //X軸移動。
  ], 
  {duration:5000, fill:'forwards'}  //掛ける時間、プロパティの反映の仕方。
);
Ani=new Animation(KE);  //アニメーション生成。

function JobCancel(){  //cancel イベントの処理：
  Ani.cancel();  //中断。
}
IdCancel.onclick=JobCancel;  //[中断] ボタンが押されたら。

function JobC(eve){  //cancel イベントの処理：
  D=eve;
  IdLog.innerHTML="中止しました";
}
function JobE(eve){  //finish イベントの処理：
  DA=eve;  //＝[object]：[object AnimationPlaybackEvent]

詳細	//isTrusted＝[boolean]：false
	//currentTime＝[object]：null
	//timelineTime＝[object]：null
	//type＝[string]：finish
	//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=JobC;  //アニメーションが中断されら。
Ani.onfinish=JobE;  //アニメーションが終了したら。

AE=new AnimationPlaybackEvent('finish', {detail:'テスト'});  //アニメーションのイベント生成。
Ani.dispatchEvent(AE);  //イベントを発生させる。

得たイベントオブジェクトに detail が無いようですが。

→new KeyframeEffect()。

→CSS：transform。CSS：translateX()。

→duration、fill。play()。

テスト