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 になります。アニメーションは pauseplay を呼び出す間に再生状態が pending から変わらない、現在 ready になっているプロミスは変化しないからです。

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

仕様書

Specification
Web Animations
# dom-animation-ready

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
ready

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

関連情報