动画结束事件未触发答案

【问题标题】：animationend event not firing动画结束事件未触发
【发布时间】：2017-01-08 06:51:31
【问题描述】：

我正在尝试向元素添加animationend 事件，但该事件没有被触发。我做错了什么，我该如何解决？

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>

【问题讨论】：

动画在哪里？我在您的代码中没有找到任何动画 css 脚本？
@prasad 没有动画，但有一个transition。当不透明度发生变化时，css 会对其进行动画处理。每当show 被删除时，它就会转换。
不是动画事件，它只是改变了类。过渡！=动画看我的答案
在任何情况下你修复了你的代码...... addEventListener 不会在 IE 6.7.8 上运行
@AlirezaMasali 我不是针对那些。

标签： javascript dom-events

【解决方案1】：

有两个独立的动画事件。

动画结束
过渡结束

使用csstransition时使用transitionend，使用@keyframes/animation时使用animationend。

【讨论】：

【解决方案2】：

您需要修改元素的动画样式属性，这是您在Jsfiddle 的更新示例

    #elem {
       background-color: orange;
       width: 100px;
       height: 100px;
       opacity: 0;
       transition: opacity 500ms ease;
       }
      /* Chrome, Safari, Opera */
     @-webkit-keyframes myopacity {
          0%   { opacity: 0; }
         100% { opacity: 1; }
      }

     @keyframes myopacity {
       0%   { opacity: 0; }
       100% { opacity: 1; }
     }
     #elem.show {
       WebkitAnimation : myopacity 1s 1; 
      animation : myopacity 1s 1;     
     }

    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('');
        alert('animation ended');
        elem.classList.remove('show')
    });

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

【讨论】：