Animation: ready プロパティ

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2020.

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

関連情報