DOM

HTMLElement:animationcancel イベント

 編集:2022.10.03 by T.A.

[Edge]。→

要素でアニメーションが予期せず中断されたときに発行されます。→Document:animationcancel イベント

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

HTML:

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

JavaScript:

function Job(eve){ //animationcancel イベントの処理:
  D=eve; //
  IdLog.innerHTML=IdLog.innerHTML+"●"; //表示。
}
IdTest.onanimationcancel=Job; //イベントの割り当て。

let KF=[
  { // from
    opacity:0,
    transform:'translateX(0px)'
  },
  { // to
    opacity:1,
    transform:'translateX(100px)'
  }
];	//キーフレーム:透明→不透明で横に100px移動。
A=IdTest.animate(KF, 3000);     //3秒掛けてアニメーション再生する。
setTimeout('A.cancel()', 1000); //1秒後にアニメーションをキャンセルする。

¶アニメーション停止はするが、イベントが起こらない。予期せぬものではなのか?

Element.animate()Animation.cancel()


テスト