在動畫結束時從DOM中刪除元素時Firefox會閃爍，而在Chrome中它工作正常

我已經通過Javascript路由&創建了網頁動畫API。它會加載新頁面，然後逐漸從舊頁面移動到新頁面。在這個週期結束時，我刪除了舊頁面的內容。但是，刪除在Firefox中似乎不能正常工作，因爲它會使舊內容閃爍片刻，這使得它非常難看。 Chrome不錯。在動畫結束時從DOM中刪除元素時Firefox會閃爍，而在Chrome中它工作正常

演示可以在這裏找到：http://daan.onl/dev/js/page-transition/index.html。

是什麼導致了這種差異，我該如何解決？

來源

2016-09-28 demanzonderjas

嘗試'的到底是不是刪除fadeOut.onfinish =' ...而不是'fadeIn.onfinish =' - 當「fadeOut」動畫結束 –

作爲獎勵時，刪除「fadeout」內容會更有意義 - 您不需要'返回新的Promise（function（解決）{ resolve（cache [url]）; }）;' - just'return cache [url];' –

@JaromandaX嗯，我實現了'fadeOut.onfinish ='解決方案，但不能解決問題，不幸的是它保持不變。仍然閃爍'oldContent.parentNode.removeChild（oldContent）' – demanzonderjas

您的時間更改爲

var timing = { 
    duration: 1500, 
    iterations: 1, 
    fill:'both' 
}

至少在oldContent

這將確保變換風格在動畫

來源

2016-09-28 10:31:36

謝謝，這解決了我的問題！ – demanzonderjas

在動畫結束時從DOM中刪除元素時Firefox會閃爍，而在Chrome中它工作正常

回答

相關問題