在Firefox中，transitionend事件沒有一致地發射，沒有溢出隱藏

我遇到了Firefox（v20.0.1）中的問題，它不會一致地觸發transitionend事件。如果我在動畫div上保留overflow: hidden風格，它可以正常工作。在Firefox中，transitionend事件沒有一致地發射，沒有溢出隱藏

我創建了一個例子來說明： http://codepen.io/harryfino/full/jphis

此示例適用於Chrome和IE10罰款，但在Firefox中你不會看到第二次點擊觸發的事件transitionend。然後在第三次點擊時，它會觸發兩次，這兩個元素將被隱藏。如果您將page.removeClass('is-animating')行註釋掉，它會正確觸發事件。

關於刪除的故事overflow: hidden：實際的代碼有從容器中溢出並且不能隱藏的div。

我想知道爲什麼它沒有在第二次點擊發射事件，作爲獎勵，爲什麼overflow: hidden正在實現這一點。

來源

2013-04-25 harryfino

這個問題已經在CodersClan有了答案。 http://www.codersclan.net/forum/ticket.php?ticket_id=34 – Dror 2013-07-29 08:34:52

@Orchestrator建議，這將有望解決您的問題。

這是Firefox中的一個常見錯誤。我想這是因爲在同一時間增加兩個班。解決的方法很簡單 - 只是包裝在超時addClass方法：

setTimeout(function(){ 
if (direction === 'in') { 
    container.addClass('is-drilled-in'); 
} else { 
    container.removeClass('is-drilled-in'); 
} 
}, 50);

作爲回答尼古拉Boychev @ codersclan

來源

2013-08-23 07:30:36 miphe

在Firefox中，transitionend事件沒有一致地發射，沒有溢出隱藏

回答

相關問題