'將改變'或translateZ（）hack提高'transition：height'上的任何性能

我正在用open/close構建一個帶有動畫高度的手風琴，其中內容高度是通過JS計算的。我想確保最佳性能，所以我在考慮強制硬件加速。'將改變'或translateZ（）hack提高'transition：height'上的任何性能

.accordion-item-content { 
    overflow: hidden; 
    transition: height .3s ease; 
    transform: translateZ(0); 
    will-change: transform; 
}

在Chrome瀏覽器開發工具，我可以看到手風琴項分別獲得一個層（因爲會變化的和/或轉換屬性），而將這一結果的任何性能提升？或者是變換，不透明度和過濾器能夠從GPU渲染中受益的唯一屬性，正如我在此理解的：http://www.sitepoint.com/introduction-to-hardware-acceleration-css-animations/

另一個問題：'會改變：高度'做什麼？它看起來像是有效的（https://developer.mozilla.org/en-US/docs/Web/CSS/will-change），但它不會創建一個圖層，我可以在開發工具中觀察。

來源

2016-02-12 Fett

我找到的最新信息在這裏https://github.com/operasoftware/devopera/pull/330如果這是目前的狀態，NO，將改變：高度不會在Chrome中創建圖層。但請注意，這是高度瀏覽器特定的 – vals

不是真的will-change或transform: translateZ()將促進你的元素到它自己的層，它會發送到您的GPU。看看https://csstriggers.com/。你只應該動畫transform和opacity。即使您正在使用will-change，任何其他屬性都會導致重新繪製或佈局重新計算。

來源

2017-11-09 15:32:47 marcobiedermann

'將改變'或translateZ（）hack提高'transition：height'上的任何性能

回答

相關問題