Animation：finish 事件
Animation 介面的 finish 事件會在動畫播放完畢時觸發，這可能發生在動畫自然完成時，也可能在呼叫 Animation.finish() 方法以立即結束動畫時。
注意： "paused" 播放狀態會覆蓋 "finished" 播放狀態；如果動畫同時處於暫停和完成狀態，則會報告 "paused" 狀態。你可以透過將其 startTime 設定為 document.timeline.currentTime - (Animation.currentTime * Animation.playbackRate) 來強制動畫進入 "finished" 狀態。
語法
在諸如 addEventListener() 之類的方法中使用事件名稱，或設定事件處理程式屬性。
js
addEventListener("finish", (event) => { })
onfinish = (event) => { }
事件型別
一個 AnimationPlaybackEvent 物件。繼承自 Event。
事件屬性
除了下面列出的屬性之外，父介面 Event 的屬性也可使用。
AnimationPlaybackEvent.currentTime只讀-
生成事件的動畫的當前時間。
AnimationPlaybackEvent.timelineTime只讀-
生成事件的動畫的時間線時間值。
示例
在 Alice in Web Animations API Land 的 Growing/Shrinking Alice Game 中，Animation.onfinish 被使用了多次。以下是一個例子，我們在元素的透明度動畫淡入完成後，重新添加了指標事件。
js
// Add an animation to the game's ending credits
const endingUI = document.getElementById("ending-ui");
const bringUI = endingUI.animate(keysFade, timingFade);
// Pause said animation's credits
bringUI.pause();
// This function removes pointer events on the credits.
hide(endingUI);
// When the credits are later faded in,
// we re-add the pointer events when they're done
bringUI.onfinish = (event) => {
endingUI.style.pointerEvents = "auto";
};
規範
| 規範 |
|---|
| Web 動畫 # dom-animation-onfinish |
| Web 動畫 # finish-event |
瀏覽器相容性
載入中…