动画：remove 事件

基线 广泛可用

此功能已得到良好确立，可在许多设备和浏览器版本中使用。它已从以下日期开始在浏览器中可用 2020 年 3 月.

当动画被浏览器 自动移除 时，Animation 接口的 remove 事件将被触发。

语法

在诸如 addEventListener() 之类的方法中使用事件名称，或设置事件处理程序属性。

js
addEventListener('remove', (event) => { })
onremove = (event) => { }

事件类型

一个 AnimationPlaybackEvent。继承自 Event。

Event AnimationPlaybackEvent

事件属性

除了下面列出的属性之外，父接口 Event 的属性也可用。

AnimationPlaybackEvent.currentTime 只读

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

AnimationPlaybackEvent.timelineTime 只读

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

示例

移除替换的动画

在此示例中，我们有一个 <button id="start"> 元素，以及一个在鼠标移动时运行的事件监听器。 mousemove 事件处理程序设置了一个动画，该动画将 <button> 动画到鼠标指针的位置。这可能会导致大量的动画列表，进而导致内存泄漏。出于这个原因，现代浏览器会自动移除被其他动画覆盖的前向填充动画。

显示创建的动画数量。使用 remove 事件监听器来计算并显示移除的动画数量。

除一个之外，所有动画最终都应该被移除。

HTML

html
<button id="start">Click to drag</button>
<br />
<button id="reset">Reset example</button>
<p>
  Click the button to start the animation (disabled by default to protect those
  who suffer migraines when experiencing such animations).
</p>
<p>Animations created: <span id="count-created">0</span></p>
<p>Animations removed: <span id="count-removed">0</span></p>

CSS

css
:root,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

button {
  margin: 0.5rem 0;
}

JavaScript

js
const button = document.querySelector("#start");
let created = 0;
let removed = 0;

button.addEventListener(
  "click",
  () => {
    document.body.addEventListener("mousemove", (event) => {
      const animation = button.animate(
        { transform: `translate(${event.clientX}px, ${event.clientY}px)` },
        { duration: 500, fill: "forwards" },
      );
      created++;
      showCounts();

      // the remove event fires after the animation is removed
      animation.addEventListener("remove", () => {
        removed++;
        showCounts();
      });
    });
  },
  { once: true },
);

function showCounts() {
  document.getElementById("count-created").textContent = created;
  document.getElementById("count-removed").textContent = removed;
}

const reset = document.querySelector("#reset");
reset.addEventListener("click", () => {
  document.location.reload();
});

结果

规范

规范
Web 动画
# dom-animation-onremove
Web 动画
# remove-event

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅