动画：finish 事件

基线 广泛可用

此功能已得到良好建立，并在许多设备和浏览器版本上运行。它自 2020 年 3 月.

报告反馈

finish 事件是 Animation 接口的事件，在动画播放完毕时触发，无论是自然完成还是调用 Animation.finish() 方法来立即结束动画。

语法

注意： "paused" 播放状态优先于 "finished" 播放状态；如果动画既处于暂停状态又处于完成状态，则将报告 "paused" 状态。您可以通过将动画的 startTime 设置为 document.timeline.currentTime - (Animation.currentTime * Animation.playbackRate) 来强制动画进入 "finished" 状态。

在诸如 addEventListener() 之类的中使用事件名称，或者设置事件处理程序属性。
addEventListener("finish", (event) => { })
onfinish = (event) => { }

事件类型

js

Event AnimationPlaybackEvent

事件属性

一个 AnimationPlaybackEvent。继承自 Event。

除了下面列出的属性外，还可以使用父接口 Event 的属性。

AnimationPlaybackEvent.currentTime 只读

生成事件的动画的当前时间。

AnimationPlaybackEvent.timelineTime 只读

示例

生成事件的动画的时间轴的时间值。

在诸如 addEventListener() 之类的中使用事件名称，或者设置事件处理程序属性。
// 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 动画 API 之地爱丽丝 成长/缩小爱丽丝游戏 中，Animation.onfinish 被多次使用。以下是一个示例，在元素的透明度动画将其淡入后，我们向元素添加了指针事件。
规范
# Web 动画
规范
# dom-animation-onfinish

浏览器兼容性

finish-event

另请参阅