[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(); //アニメーションの再生。 }
¶アニメーション開始されるが、イベントが起こらない。