javascript - 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

最佳答案

经过一番调查，在我看来，对于两个不同的handleEvent事件，每个事件都分别调用一次WebKitTransitionEvent，这两个事件在propertyName中有所不同–第一个事件的propertyName为"opacity"；另一个有"-webkit-transform"。

我认为对于每个完成动画的CSS属性，始终总是调用handleEvent一次，然后在整个过渡块中都使用"-webkit-transform"调用一次。

为了修正您的示例，我相信这会起作用：

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

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

关于javascript - webkitTransitionEnd eventListener触发两次，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/6327352/