无法删除CSS动画结束的事件侦听器

Question

我正在创建幻灯片库。 它创建了一个过渡对象，负责每张幻灯片的转换。

事情很有效，除了我无法在动画完成时从我的幻灯片中删除事件监听器。 我已经将回调分配为我的基本Transition类的属性，我原本认为它将提供在动画完成时删除侦听器所需的引用：

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');
}

因此，我希望每次动画完成时，都会删除侦听器，并且控制台会为每次传递记录一次当前日期。

但是，我所看到的是，侦听器被连接而没有被删除，所以我最终会有多个侦听器处理我的动画结束事件，因此我正在累积更多的日志写入我的控制台。

这个小提琴与Chrome兼容： http ： //jsfiddle.net/HA9B7/1/

Answer 1

当您使用bind（）时，将返回一个新的匿名函数。 如果您不保存对它的引用，它将丢失：

...ner('webkitAnimationEnd', /* lost ref. */ this.endAnimation.bind(this));

如果有人说：

var bound = this.endAnimation.bind(this);
el.addEventListener('some_event', bound);

一个人可以做到：

el.removeEventListener('some_event', bound);