HTMLElement: animationcancel event
Experimental: 这是一个实验中的功能
此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变。
一个 animationcancel
事件会在一个 CSS Animation 意外终止时触发。换句话说,就是任意时刻 CSS Animation 在没有发送 animationend (en-US)
事件时停止运行。这种情况会在 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 |
---|
CSS Animations Level 2 # eventdef-globaleventhandlers-animationcancel |
Browser compatibility
BCD tables only load in the browser
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