javascript - webkit TransitionEnd 事件监听器触发两次

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 属性调用一次，然后为整个转换 block 调用一个带有 "-webkit-transform" 的属性。

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

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

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