↑

DOM

：

インターフェイス

：

Animation.ready プロパティ

　編集：2022.10.21 by T.A.

[Edge]。読取専用。→●、mdn、mdn（en-US）

アニメーション Animation の再生準備が整ったときに解決される Promise を返します。

mdn： アニメーションが「保留中」の再生状態になるたびに、またアニメーションがキャンセルされるたびに、新しいプロミスが作成され、どちらの場合でも、アニメーションを再開する準備が整っているためです。

mdn： 注： 保留中の再生リクエストと保留中の一時停止リクエストの両方に同じ Promise が使用されるため、作成者は、プロミスが解決されたときにアニメーションの状態を確認することをお勧めします。

構文
Animation.ready
Animation Animation
値

アニメーションを再生する準備ができたときに解決される Promise。通常、ready プロミスを使用する場合は、次のような構造を使用します： 

animation.ready.then(() => {
  // アニメーションを実行する準備ができたら、必要なことは何でも行います。
});
例
new Animation() 使用、と ready

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(500px)'}  //X軸移動。
  ], 
  {duration:5000, fill:'forwards'}  //5000ms掛けて、？。
);
Ani=new Animation(KF, document.timeline);  //アニメーション再生。

function JobPlay(){  //「再生」ボタンが押された時の処理：
  Ani.play();        //アニメーション再生。
}
function JobPause(){ //「一時停止」ボタンが押された時の処理：
  Ani.pause();       //アニメーション一時停止。
}
Ani.ready.then( () => {alert("準備完了")}  //プロミス解決：“成功”
  , () => {alert("まだです")}              //　“失敗”
);
IdSaisei.onclick=JobPlay;      //ボタンにイベント割り当て。
IdItijiteisi.onclick=JobPause; //ボタンにイベント割り当て。

アニメーションの準備が出来ていない場合はどうなるのか不明。

→KeyframeEffect()、CSS：transform。CSS：translateX()。duration、fill。

→play()、pause()。

→then()。

→click、input イベント。

→setInterval()。

テスト
HTML：


ここにHTMLが表示される
⯈スクリプト組み込み：
JavaScript：


JavaScript：



表示内容：
表示内容：