animationend事件未触发 [英] animationend event not firing

问题描述

我正在尝试向元素添加animationend事件，但是不会触发该事件.我在做什么错了，我该如何解决?

I am trying to add an animationend event to an element, but the event doesn't get fired. What am I doing wrong, and how can I fix it?

JSFiddle

var btn = document.getElementById('btn');
var elem = document.getElementById('elem');
var timeOutFunc;

btn.addEventListener('click', function() {
  elem.classList.add('show');
  clearTimeout(timeOutFunc);
  timeOutFunc = setTimeout(function() {
    elem.classList.remove('show')
  }, 1000);
});


elem.addEventListener('animationend', function(e) {
  console.log('animation ended');
});

#elem {
  background-color: orange;
  width: 100px;
  height: 100px;
  opacity: 0;
  transition: opacity 500ms ease;
}
#elem.show {
  opacity: 1;
  transition: none;
}

<button id="btn">Press Me</button>
<div id="elem"></div>

推荐答案

有两个单独的动画事件.

There are two separate animating events.

1. 动画结束
2. transitionend

使用css transition时使用transitionend，而使用@keyframes/animation时使用animationend.

When using the css transition use transitionend, and when using @keyframes/animation, use animationend.

这篇关于animationend事件未触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！