元素：animationend 事件
animationend 事件在 CSS 动画 完成后触发。如果动画在完成前中止，例如元素被从 DOM 中移除或动画被从元素中移除，则不会触发 animationend 事件。
语法
在诸如 addEventListener() 之类的方法中使用事件名称，或设置事件处理程序属性。
js
addEventListener("animationend", (event) => { })
onanimationend = (event) => { }
事件类型
一个 AnimationEvent。继承自 Event。
事件属性
也继承自其父级 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">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: slide-in;
animation-iteration-count: 2;
}
@keyframes slide-in {
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-animationend |
浏览器兼容性
加载中…