元素:animationend 事件
animationend
(动画结束)事件在 CSS 动画完成时触发。如果在动画完成前中止了动画,例如将元素从 DOM 中移除,或将动画从元素上移除,animationend
事件不会触发。
语法
在 addEventListener()
方法中使用事件名称,或设置事件处理器属性。
addEventListener('animationend', (event) => {});
onanimationend = (event) => { };
事件类型
AnimationEvent
。继承自 Event
。
事件属性
也从其父接口 Event
继承属性。
AnimationEvent.animationName
只读-
一个字符串,包含了生成动画的
animation-name
的值。 AnimationEvent.elapsedTime
(en-US) 只读-
一个浮点数(
float
),表示动画运行的时间(以秒为单位)。此事件的这个属性并不包括动画暂停的时间。对于animationstart
事件,elapsedTime
的值为0.0
(除非将animation-delay
设置成了一个负值,在这种情况下,elapsedTime
为(-1 * delay)
)。 AnimationEvent.pseudoElement
(en-US) 只读-
一个字符串,以
'::'
开头,包含了动画运行时所在的伪元素的名称。如果动画不是在伪元素而是在元素上运行,则为空字符串:''
。
示例
该实例获取一个正在绘制动画的元素,并监听 animationend
事件。
const animated = document.querySelector('.animated');
animated.addEventListener('animationend', () => {
console.log('Animation ended');
});
同上,但使用 onanimationend
事件处理器属性:
const animated = document.querySelector('.animated');
animated.onanimationend = () => {
console.log('Animation ended');
};
运行实例
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
.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
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
(en-US) - 以
Window
为目标的此事件:animationend
(en-US)