这是一个实验中的功能
此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变。
一个 animationcancel
事件会在一个 CSS Animation 意外终止时触发. 换句话说, 就是任意时刻 CSS Animation 在没有发送 animationend
事件时停止运行. 这种情况会在 animation-name
发生改变导致动画被移除时, 或者使用CSS隐藏了动画中的node节点. 因此要么node节点直接被隐藏,要么因为node节点的父节点被隐藏.
该事件的处理函数可以通过 onanimationcancel
属性进行设置, 或者使用 addEventListener()
.
Bubbles | Yes |
---|---|
Cancelable | No |
Interface | AnimationEvent |
Event handler property | onanimationcancel |
Examples
这段代码获取一个当前在动画中的元素,并为它添加了一个animationcancel
事件监听. 然后设置该元素的 display
属性为 none
, 触发 animationcancel
事件.
const animated = document.querySelector('.animated');
animated.addEventListener('animationcancel', () => {
console.log('Animation canceled');
});
animated.style.display = 'none';
同样, 使用 onanimationcancel
属性替换 addEventListener()
:
const animated = document.querySelector('.animated');
animated.onanimationcancel = () => {
console.log('Animation canceled');
};
animated.style.display = 'none';
Live example
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
.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);
}
}
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;
let active = animation.classList.contains('active');
if (active) {
applyAnimation.textContent = "Cancel animation";
} else {
applyAnimation.textContent = "Activate animation";
}
});
Result
Specifications
Specification | Status | Comment |
---|---|---|
CSS Animations | Working Draft | Initial definition |
Browser compatibility
BCD tables only load in the browser
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
See also
- CSS Animations
- Using CSS Animations
AnimationEvent
- Related events:
animationstart
,animationend
,animationiteration
- This event on
Document
targets:animationcancel
- This event on
Window
targets:animationcancel