元素：animationend 事件

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since December 2019.

animationend（动画结束）事件在 CSS 动画完成时触发。如果在动画完成前中止了动画，例如将元素从 DOM 中移除，或将动画从元素上移除，animationend 事件不会触发。

语法

在 addEventListener() 方法中使用事件名称，或设置事件处理器属性。

js
addEventListener("animationend", (event) => {});

onanimationend = (event) => {};

事件类型

AnimationEvent。继承自 Event。

Event AnimationEvent

事件属性

也从其父接口 Event 继承属性。

AnimationEvent.animationName 只读

一个字符串，包含了生成动画的 animation-name 的值。

AnimationEvent.elapsedTime 只读

一个浮点数（float），表示动画运行的时间（以秒为单位）。此事件的这个属性并不包括动画暂停的时间。对于 animationstart 事件，elapsedTime 的值为 0.0（除非将 animation-delay 设置成了一个负值，在这种情况下，elapsedTime 为 (-1 * delay)）。

AnimationEvent.pseudoElement 只读

一个字符串，以 '::' 开头，包含了动画运行时所在的伪元素的名称。如果动画不是在伪元素而是在元素上运行，则为空字符串：''。

示例

该实例获取一个正在绘制动画的元素，并监听 animationend 事件。

js
const animated = document.querySelector(".animated");

animated.addEventListener("animationend", () => {
  console.log("Animation ended");
});

同上，但使用 onanimationend 事件处理器属性：

js
const animated = document.querySelector(".animated");

animated.onanimationend = () => {
  console.log("Animation ended");
};

运行实例

HTML

html
<div class="animation-example">
  <div class="container">
    <p class="animation">你选择了一个寒冷的夜晚到访我们的星球。</p>
  </div>
  <button class="activate" type="button">激活动画</button>
  <div class="event-log"></div>
</div>

CSS

css
.container {
  height: 3rem;
}

.event-log {
  width: 25rem;
  height: 2rem;
  border: 1px solid black;
  margin: 0.2rem;
  padding: 0.2rem;
}

.animation.active {
  animation-duration: 2s;
  animation-name: slidein;
  animation-iteration-count: 2;
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

JavaScript

js
const animation = document.querySelector("p.animation");
const animationEventLog = document.querySelector(
  ".animation-example>.event-log",
);
const applyAnimation = document.querySelector(
  ".animation-example>button.activate",
);
let iterationCount = 0;

animation.addEventListener("animationstart", () => {
  animationEventLog.textContent = `${animationEventLog.textContent}'动画开始' `;
});

animation.addEventListener("animationiteration", () => {
  iterationCount++;
  animationEventLog.textContent = `${animationEventLog.textContent}'动画迭代轮次：${iterationCount}' `;
});

animation.addEventListener("animationend", () => {
  animationEventLog.textContent = `${animationEventLog.textContent}'动画结束'`;
  animation.classList.remove("active");
  applyAnimation.textContent = "激活动画";
});

animation.addEventListener("animationcancel", () => {
  animationEventLog.textContent = `${animationEventLog.textContent}'动画已被取消'`;
});

applyAnimation.addEventListener("click", () => {
  animation.classList.toggle("active");
  animationEventLog.textContent = "";
  iterationCount = 0;
  const active = animation.classList.contains("active");
  applyAnimation.textContent = active ? "取消动画" : "激活动画";
});

结果

规范

Specification
CSS Animations Level 1
# eventdef-globaleventhandlers-animationend

浏览器兼容性

参见