Javascript animationend事件未触发

我正在尝试向元素添加

animationend

事件，但该事件未被激发。我做错了什么？我该如何修复它

var btn=document.getElementById（'btn'）；
var elem=document.getElementById（'elem'）；
var-timeOutFunc；
btn.addEventListener（'click'，function（）{
元素classList.add（'show'）；
clearTimeout（TimeOutpunc）；
timeoutpunc=setTimeout（函数（）{
elem.classList.remove（'show'）
}, 1000);
});
元素addEventListener（'animationend'，函数（e）{
log（“动画结束”）；
});
#元素{
背景颜色：橙色；
宽度：100px；
高度：100px；
不透明度：0；
过渡：不透明度500ms；
}
#元素秀{
不透明度：1；
过渡：无；
}
按我
有两个单独的动画事件

动画结束
过渡
当使用css
transition
使用
transitionend
时，当使用
@关键帧/动画
时，使用
animationend
时，您需要修改元素的动画样式属性。这是您在

#元素{
背景颜色：橙色；
宽度：100px；
高度：100px；
不透明度：0；
过渡：不透明度500ms；
}
/*铬、狩猎、歌剧*/
@-webkit为肌力设定关键帧{
0%{不透明度：0；}
100%{不透明度：1；}
}
@关键帧肌力{
0%{不透明度：0；}
100%{不透明度：1；}
}
#元素秀{
WebKit动画：肌力1s1；
动画：肌力1s1；
}
var btn=document.getElementById（'btn'）；
var elem=document.getElementById（'elem'）；
var-timeOutFunc；
btn.addEventListener（'click'，function（）{
元素classList.add（'show'）；
/*clearTimeout（TimeOutpunc）；
timeoutpunc=setTimeout（函数（）{
elem.classList.remove（'show'）
}, 1000);*/
});
元素addEventListener（'animationend'，函数（e）{
控制台日志（“”）；
警报（“动画结束”）；
elem.classList.remove（'show'）
});
按我
动画在哪里？我在你的代码中找不到任何动画css脚本？@prasad没有动画，但有一个
转换
。当不透明度改变时，css将为其设置动画。无论何时
show
被删除，它都会转换。这不是动画事件，而是更改类。过渡！=动画见我的答案在任何情况下，你固定你的代码。。。addEventListener不会在IE 6.7上运行。8@AlirezaMasali我不是针对那些人。
    #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>