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	Status	Comment
CSS Animations Level 1	Working Draft	Initial definition

Browser compatibility

BCD tables only load in the browser