为什么onanimationend在我的代码中不起作用，但addEventListener（“animationend”）呢？

Question

I'm trying to remove an element once its fade animation has ended. Adding a listener to the animationend event works fine, but assigning the handler to .onanimationend doesn't - the function does not fire when the animation ends. Why doesn't the on- handler work?

I'm running the code on FF 48, but the problem also occurs on Chrome 71.

 const post = document.querySelector('.post'); const hideButton = post.children[0]; // When hide button is clicked, run fade animation. hideButton.onclick = function() { post.style.animationPlayState = "running"; }; // This function runs post.addEventListener("animationend", function() { console.log('animationend listener running'); // this.remove(); }); // This function doesn't run post.onanimationend = function() { console.log('onanimationend handler running'); // this.remove(); }; 

 @keyframes hide { 0% { opacity: 1; height: 100%; margin: 10px 0; padding: 15px; } 75% { opacity: 0; height: 100%; margin: 10px 0; padding: 15px; } 100% { opacity: 0; height: 0px; margin: 0px; padding: 0px; } } .post { background-color: #80ff00; margin: 10px 0; padding: 15px; animation-name: hide; animation-duration: 2s; animation-fill-mode: forwards; animation-play-state: paused; } 

 <div class="post"> Post <button class="hide"> Hide </button> </div> 

Answer 1

Check your browser version and compare with https://caniuse.com/#search=animationend

Firefox v48.0.0 – Java Broker 36 mins ago

Your browser isn't compatible with animationend

Answer 2

This is because Chrome still doesn't and FF 45 still didn't support HTMLElement.onanimationend handler.
I can't tell for Firefox 45 (that you should update btw), but Chrome does support the GlobalEventHandler's one ( window ), which explains why handlers attached via EventTarget.addEventListener will catch it.

 window.onanimationend = e => { // stacksnippet's console also has CSS animations... if(e.animationName === 'roundify') console.log({ // logging the full event will kill the page target: e.target, type: e.type, animationName: e.animationName }); } 

 #anim { width: 100px; height: 100px; background: #333; animation: roundify 2s forwards; } @keyframes roundify { 100% { border-radius: 50%; } } 

 <div id="anim"></div> 

Now if you really need the HTMLElement and Document handlers, you can very well implement it yourself, but note that it's generally a bad idea to change such DOM prototypes.

 // now we only have our Element's event anim.onanimationend = e => console.log({ // logging the full event will kill the page target: e.target, type: e.type, animationName: e.animationName }); 

 #anim{ width: 100px; height: 100px; background: #333; animation: roundify 2s forwards; } @keyframes roundify { 100% { border-radius: 50%; } } 

 <script> // This does modify both HTMLElement and Document protoypes, // should be placed at top most position in the doc possible (function(){ if( !("onanimationend" in HTMLElement.prototype) && window.onanimationend !== undefined ) { // will attach the handler on a the Object's `__animationendhandler` property const getsetanimationend = { get: function() { return this._animationendhandler || null }, set: function(func) { this.removeEventListener('animationend', this._animationendhandler); if(typeof func !== 'function') { this._animationendhandler = null; return; } this._animationendhandler = func; this.addEventListener('animationend', func); } }; Object.defineProperty(HTMLElement.prototype, 'onanimationend', getsetanimationend); Object.defineProperty(Document.prototype, 'onanimationend', getsetanimationend); } })(); </script> <div id="anim"></div>