animationend事件未触发

Question

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> 

Answer 1

There are two separate animating events.

1. animationend
2. transitionend

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

Answer 2

You need to modify the animation style property of the element this is your updated example at 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>