title: Cannot remove event listener for CSS animation end
body: <p>I am creating a slideshow gallery. It creates a transition object that will be responsible for the transitioning of each slide.</p>
  
  <p>Things are working great, except I am unable to remove event listeners from my slides for when the animation completes. I have assigned the callback as a property of my base Transition class, which I had thought would provide the reference needed to remove the listener when the animation is complete:</p>
  
  <pre><code>function Transition(slide){
      this.el = slide;
      this.settings = {
       'inTransition': 'fade',
      'outTransition': 'fade',
      'transitionSpeed': 1000, //in ms
      'slideSpeed': 2000
          };
      this.duration = (this.settings['transitionSpeed'] / 1000) + 's';
      this.endAnimation = null;
  }
  
  //FADE TRANSITION
  function FadeTransition(slide){
      Transition.call(this, slide);
  }
  FadeTransition.prototype = Object.create(Transition.prototype);
  FadeTransition.prototype.constructor = FadeTransition;
  
  FadeTransition.prototype.inRight = function(){
  
      var self = this;
      this.endAnimation = function(){
          DomUtil.removeClass(this.el, 'nd-fade-in-transition');
          his.el.removeEventListener( 'webkitAnimationEnd', this.endAnimation );
          console.log(new Date());
  
           //running the following in the console shows the number of listeners growing                
           //getEventListeners(this.slide.el).webkitAnimationEnd.length); //This keeps getting larger
      }
  
      this.el.style.webkitAnimationDuration = this.duration;
  
      this.el.addEventListener( 'webkitAnimationEnd', this.endAnimation.bind(this));
      DomUtil.addClass(this.el, 'nd-fade-in-transition');
  }
  </code></pre>
  
  <p>So, I would expect that each time the animation completes, the listener is removed, and the console logs the current date once for every pass.</p>
  
  <p>However, what I am seeing is that listeners are being attached without ever being removed, so I'm ending up with multiple listeners handling my animation end event, so I'm getting cumulatively larger number of logs being written to my console.</p>
  
  <p>This fiddle is compatible with Chrome: <a href="http://jsfiddle.net/HA9B7/1/" rel="nofollow">http://jsfiddle.net/HA9B7/1/</a></p>