webkitTransitionEnd eventListener两次射击

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