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 |
浏览器兼容性
加载中…