webkitTransitionEnd eventListener觸發兩次

我想寫一些具有webkitTransitionEnd eventListener的回調函數，但由於某種原因eventListener被激發兩次（doSomething被執行兩次）。webkitTransitionEnd eventListener觸發兩次

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

這不適用於Safari 5.1而不調用doSomething兩次。我不想在第一次運行時刪除eventListener，我只是希望它在類更改時執行一次。

直播http://mynameisraj.com/code/cssbox

來源

2011-06-13 raj

做了一些調查後，在我看來，handleEvent被調用一次每兩個獨立WebKitTransitionEvent事件，這在propertyName不同的 - 第一個事件有"opacity"的propertyName;另一個有"-webkit-transform"。

我認爲handleEvent總是爲每個完成動畫的CSS屬性調用一次，然後爲整個轉換塊調用"-webkit-transform"。

要解決你的榜樣，我相信這將工作：

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

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

來源

2011-06-13 08:30:06

這解決了這個問題。我應該知道它會在每次轉換時觸發一次！ – raj 2011-06-13 15:17:33

感謝您的解答，只是整理了一直存在的問題！另外，對於任何使用jQuery的人，你都可以通過使用event.originalEvent.propertyName來實現。 – will 2012-02-28 13:59:52

我有同樣的問題，但在我的情況下，它是同一個道具發射兩次!!？ – albanx 2012-09-30 11:09:29

webkitTransitionEnd eventListener觸發兩次

回答

相關問題