元素：animationcancel 事件

animationcancel 事件在 CSS 动画 意外中止时触发。换句话说，只要动画在不发送 animationend 事件的情况下停止运行，就会触发该事件。这可能发生在 animation-name 被更改以致动画被移除，或者动画节点使用 CSS 隐藏时。因此，无论是直接隐藏，还是由于其任何包含节点的隐藏而导致隐藏。

可以通过设置 onanimationcancel 属性或使用 addEventListener() 来添加此事件的事件处理程序。

语法

在像 addEventListener() 这样的方法中使用事件名称，或设置事件处理程序属性。

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

onanimationcancel = (event) => {};

事件类型

一个 AnimationEvent。继承自 Event。

Event AnimationEvent

事件属性

还继承了其父级 Event 的属性。.

AnimationEvent.animationName 只读

包含生成动画的 animation-name 值的字符串。

AnimationEvent.elapsedTime 只读

一个 float，表示该事件触发时动画运行的时间量（以秒为单位），不包括动画暂停的任何时间。对于 animationstart 事件，elapsedTime 为 0.0，除非 animation-delay 为负值，在这种情况下，该事件将以 elapsedTime 包含 (-1 * delay) 的值触发。

AnimationEvent.pseudoElement 只读

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

示例

此代码获取当前正在执行动画的元素，并向animationcancel事件添加监听器。然后，它将元素的display属性设置为none，这将触发animationcancel事件。

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

animated.addEventListener("animationcancel", () => {
  console.log("Animation canceled");
});

animated.style.display = "none";

相同，但使用onanimationcancel属性而不是addEventListener()

js
const animated = document.querySelector(".animated");
animated.onanimationcancel = () => {
  console.log("Animation canceled");
};

animated.style.display = "none";

实时示例

HTML

html
<div class="animation-example">
  <div class="container">
    <p class="animation">You chose a cold night to visit our planet.</p>
  </div>
  <button class="activate" type="button">Activate animation</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 {
    transform: translateX(100%) scaleX(3);
  }
  to {
    transform: translateX(0) scaleX(1);
  }
}

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 started' `;
});

animation.addEventListener("animationiteration", () => {
  iterationCount++;
  animationEventLog.textContent = `${animationEventLog.textContent}'animation iterations: ${iterationCount}' `;
});

animation.addEventListener("animationend", () => {
  animationEventLog.textContent = `${animationEventLog.textContent}'animation ended'`;
  animation.classList.remove("active");
  applyAnimation.textContent = "Activate animation";
});

animation.addEventListener("animationcancel", () => {
  animationEventLog.textContent = `${animationEventLog.textContent}'animation canceled'`;
});

applyAnimation.addEventListener("click", () => {
  animation.classList.toggle("active");
  animationEventLog.textContent = "";
  iterationCount = 0;
  const active = animation.classList.contains("active");
  applyAnimation.textContent = active
    ? "Cancel animation"
    : "Activate animation";
});

结果

规范

规范
CSS 动画级别 1
# eventdef-globaleventhandlers-animationcancel

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅