DOM

Animation.pending プロパティ

 編集:2022.10.21 by T.A.

[Edge]。→

アニメーション Animation が再生の開始や実行中のアニメーションの一時停止などの非同期操作を現在待機しているかどうかを論理値で示します。

構文
Animation.pending
Animation Animation

論理値。アニメーションが保留中の場合は true、それ以外の場合は false。

簡単な Web アニメーションと pending

HTML:

<DIV id=IdTest style="width:1em">■</DIV>
<BUTTON id=IdSaisei>再生</BUTTON>
<BUTTON id=IdItijiteisi>一時停止</BUTTON><BR>
<SPAN id=IdLog></SPAN>

JavaScript:

KF=new KeyframeEffect(  //キーフレームの指定:
  IdTest, 
  [
    {transform:'translateX(0)'}, {transform:'translateX(200px)'}  //X軸移動。
  ], 
  {duration:3000, fill:'forwards'}  //3000ms掛けて、?。
);
Ani=new Animation(KF, document.timeline);  //アニメーション再生。

function JobPlay(){  //「再生」ボタンが押された時の処理:
  Ani.play();        //アニメーション再生。
}
function JobPause(){ //「一時停止」ボタンが押された時の処理:
  Ani.pause();       //アニメーション一時停止。
}
IdSaisei.onclick=JobPlay;      //ボタンにイベント割り当て。
IdItijiteisi.onclick=JobPause; //ボタンにイベント割り当て。
function Job(){  //タイマー監視の処理:
  IdLog.innerHTML="Ani.pending:"+Ani.pending;  //表示。
}
setInterval(Job, 500);  //0.5秒毎のタイマー監視割り当て。

false しか得られなかった。「保留中」とはどんな状態だろう?。

KeyframeEffect()CSS:transformCSS:translateX()duration、fill

play()pause()clicksetInterval()


テスト