DOM

：

：

HTMLElement：animationend イベント

　編集：2022.10.03 by T.A.

[Edge]？。→、

要素でアニメーションが正常に完了したときに発行されます。→Document：animationend

バブリング
キャンセル可能
インターフェイス
イベント ハンドラー プロパティ
例
スクリプトでアニメーション

HTML： 

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

JavaScript： 

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

let KF=[
  { // from
    opacity:0,
    transform:'translateX(0px)'
  },
  { // to
    opacity:1,
    transform:'translateX(100px)'
  }
];	//キーフレーム：透明→不透明で横に100px移動。
A=IdTest.animate(KF, 2000);     //2秒掛けてアニメーション再生する。
IdPlay.onclick=function(){ //[再生]ボタンにclickイベント割り当て。
  A.play();  //アニメーションの再生。
}

¶アニメーション停止はするが、イベントが起こらない。EventTarget.addEventListener() 使用でもだめだった。

「IdTest.onanimationend=Job;」を「document.onanimationend=Job;」でもだめで、addEventListener() 使用でもだめだった。

→Element.animate()。

CSSでアニメーション

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


 
HTML：
 
<DIV id=IdTest style="width:1em;
  animation-name:TestKF;
  animation-duration:3s;
  animation-iteration-count:1;
">■</DIV>
<SPAN id=IdLog></SPAN>


 
JavaScript：
 
function Job(eve){ //animationend イベントの処理：
  D=eve; //
  IdLog.innerHTML=IdLog.innerHTML+"●"; //表示。
}
IdTest.onanimationend=Job;  //イベント割り当て。
A=document.getAnimations(); //文書に割り当てられているアニメーション コレクションを得る。
	//＝[object]：。ヌル オブジェクトが返ってきた。
A[0].play(); //アニメーションの再生。ヌル オブジェクトなので再生できない。


 
→document.getAnimations()。









テスト