webkitTransitionEnd eventListener触发两次

问题描述

| 我正在尝试为webkittransitionend eventListener编写具有回调函数的内容，但是由于某种原因，eventListener被触发了两次（doSomething被执行了两次）。

Something.prototype.functionOne = function() {
    this.lightBox = document.createElement(\'div\');
    if (this.transitions)
        this.element.addEventListener(\'webkittransitionend\',this,false);

    window.setTimeout(function() {
        this.element.className = \'visible\';
    }.bind(this),0);
}

Something.prototype.handleEvent = function(event) {
    event.stopPropagation();
    this.doSomething();
}

如果不两次调用doSomething，则无法在Safari 5.1上运行。我不想在第一次运行时删除eventListener，我只希望它在更改类后执行一次。 直播http://mynameisraj.com/code/cssBox     

解决方法

        经过一番调查，在我看来，两次独立的

WebKitTransitionEvent

事件（分别在

propertyName

中有所不同）被一次称为

handleEvent

，第一个事件的

propertyName

为

\"opacity\"

。另一个有

\"-webkit-transform\"

。 我假设对于完成动画的每个CSS属性，总是调用一次“ 1”，然后在整个过渡块中调用一次带有“ 6”的属性。 为了修正您的示例，我相信这会起作用：

Something.prototype.handleEvent = function(event) {
    event.stopPropagation();

    if ( event.propertyName === \"-webkit-transform\" ) {
        this.doSomething();
    }
}