元素:animationend 事件
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2020.
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">你选择了一个寒冷的夜晚到访我们的星球。</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 |
浏览器兼容性
BCD tables only load in the browser
参见
- CSS 动画
- 使用 CSS 动画
AnimationEvent
- 相关事件:
animationstart
,animationcancel
,animationiteration
- 以
Document
为目标的此事件:animationend
- 以
Window
为目标的此事件:animationend