Animation: ready プロパティ

Baseline 2022

Newly available

Since September 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Animation.ready はウェブアニメーション API の読み取り専用プロパティで、アニメーションが再生可能になったときに解決するプロミス (Promise) を返します。アニメーションの再生状態が "pending" になるたびに、またアニメーションが取り消される可能性があるときにも、新しいプロミスが作成されます。

メモ: 同じ Promise が保留中の play リクエストと保留中の pause リクエストの両方に使用されるので、プロミスが解決したときにアニメーションの状態を調べることをお勧めします。

値

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

js
animation.ready.then(() => {
  // アニメーションを実行する準備ができたときに
  // 必要なことを何かする
});

例

次の例では、現在 ready になっているプロミスが解決すると、アニメーションの状態は running になります。アニメーションは pause と play を呼び出す間に再生状態が pending から変わらない、現在 ready になっているプロミスは変化しないからです。

js
animation.pause();
animation.ready.then(() => {
  // 'running' と表示
  alert(animation.playState);
});
animation.play();

仕様書

Specification
Web Animations
# dom-animation-ready

ブラウザーの互換性

BCD tables only load in the browser

関連情報