當轉換以div結束時觸發webkitTransitionEnd事件並且轉換在所有CHILD div上結束？

所有，當轉換以div結束時觸發webkitTransitionEnd事件並且轉換在所有CHILD div上結束？

我有一個情況看起來大致是這樣的：

我的HTML頁面中包含的div（我會打電話給「parentDiv」）上我執行過渡。當這種轉變完成時，它應該叫「onTransitionEndParent」

parentDiv包含一個div（我會打電話給「childDiv」）上我執行不同過渡。當該轉換結束時，應該調用「onTransitionEndChild」。

所以，我的代碼看起來大致是這樣的：

parentDiv.addEventListener("webkitTransitionEnd", onTransitionEndParent, false); 
childDiv.addEventListener("webkitTransitionEnd", onTransitionEndChild, false);

我發現這個問題...

onTransitionEndParent被稱爲當parentDiv的過渡結束（正確的）。然而，這是ALSO時childDiv過渡端（不出我所料...）

換句話說...

onTransitionEndChild被稱爲調用時childDiv的過渡結束
onTransitionEndParent被調用時parentDiv的過渡結束 又一次時childDiv的過渡結束

這是個正確的行爲，還是我做錯了什麼？

有沒有辦法確保onDnsitionEndParent只在parentDiv的轉換結束時被調用，而不是在它的任何子div的轉換結束時才被調用？

非常感謝提前。

來源

2011-07-29 mattstuehler

transitionEnd是所謂的冒泡事件，正在從孩子向其父母派發（冒泡）。

爲您選擇：

無論是分析事件對象的event.target屬性 - 它應該包含元素與端過渡。
或者在每個子元素上安裝transitionEnd事件處理函數，並調用 event.stopPropagation()以防止冒泡。

來源

2011-07-29 15:19:37

謝謝，c微笑。完美的答案。 – mattstuehler

'event.stopPropagation（）'這。不知道，你的真棒。 – TERMtm

我不知道'transitionEnd'冒泡了。僅僅因爲巧合，我一年沒有遇到這個問題。我今天第一次體驗它，我很高興我找到了你的答案。檢查源元素以確定是否要採取行動是我的選擇。 – WrongAboutMostThings

我在最後一次chrome更新後遇到同樣的問題。兒童動畫觸發了父母的動畫結局。這隻發生在Chrome的桌面版，而不是FF或Chrome版的移動版。

任何有興趣我解決了這個利用：

 $(element).on("animationend webkitAnimationEnd", function(){ 
      //do something 
     }) 
     .children().on("animationend webkitAnimationEnd", function(){ 
      return false; //you can just use event.stopPropagation() 
     });

來源

2015-05-29 09:10:08

要添加到@ C-微笑回答，檢查event.propertyName當有元素上多次轉變幫助。所以，例如 -

button.addEventListener('transitionend', function(event) { 
    if (event.target.classList.contains('button') && event.propertyName === 'opacity') { 
    button.classList.add('hide'); 
    } 
}, false);

來源

2016-10-13 20:59:47 scottsandersdev

也許這應該是對@c-smiles'回答的評論？ – Barett

我沒有足夠高的聲望來給其他答案添加評論:(得到S.O的聲望 – scottsandersdev

當轉換以div結束時觸發webkitTransitionEnd事件並且轉換在所有CHILD div上結束？

回答

相關問題