[Edge]?。→、
要素でアニメーションが開始したときに発行されます。→Document:animationstart
| バブリング | ¶ |
|---|---|
| キャンセル可能 | ¶ |
| インターフェイス | ¶ |
| イベント ハンドラー プロパティ |
HTML:
<DIV id=IdTest style="width:1em;">■</DIV> <BUTTON id=IdPlay>再生</BUTTON> <SPAN id=IdLog></SPAN>
JavaScript:
function Job(eve){ //animationstart イベントの処理:
D=eve; //
IdLog.innerHTML=IdLog.innerHTML+"●"; //表示。
}
IdTest.onanimationstart=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(); //アニメーションの再生。
}
¶アニメーション開始されるが、イベントが起こらない。