Question

我正在尝试为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

Answer 1

在做了一些调查之后，在我看来handleEvent每次被调用两次WebKitTransitionEvent个事件，propertyName不同 - 第一个事件的propertyName } "opacity";另一个有"-webkit-transform"。

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

要修复您的示例，我相信这会有效：

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

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

webkitTransitionEnd eventListener两次射击

1 个答案: