'将改变'或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'上的任何性能

回答

相关问题