Animation: ready 屬性

Baseline 已廣泛支援

此特性已經十分成熟,可在許多裝置和瀏覽器版本上使用。自 2020 年 7 月以來,它已在各大瀏覽器中可用。

Animation.readyWeb Animations API 中的一個只讀屬性,它返回一個 Promise,當動畫準備好播放時,該 Promise 會解析。每當動畫進入 "pending" play state 或動畫被取消時,都會建立一個新的 Promise,因為在這兩種情況下,動畫都已準備好再次啟動。

注意: 由於 playpause 請求都使用相同的 Promise,因此建議作者在 Promise 解析時檢查動畫的狀態。

一個 Promise,當動畫準備好播放時,它會解析。通常,在使用 ready Promise 時,你會使用類似這樣的結構:

js
animation.ready.then(() => {
  // Do whatever needs to be done when
  // the animation is ready to run
});

示例

在以下示例中,當 **當前的 ready Promise** 解析時,動畫的狀態將是 running,因為在呼叫 pauseplay 之間,動畫沒有離開 pending 播放狀態,因此 **當前的 ready Promise** 沒有改變。

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

規範

規範
Web 動畫
# dom-animation-ready

瀏覽器相容性

另見