html - 'will-change'或translateZ()hack会提高 'transition: height'的性能吗？

我在打开/关闭上构建具有动画高度的 Accordion ，其中内容高度是通过JS计算的。我想确保最佳性能，所以我在考虑强制硬件加速。

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

在Chrome开发工具中，我可以看到每个 Accordion 元素都有一个图层(由于will-change和/或transform属性)，但这会带来性能提升吗？
或者，变换，不透明度和过滤器是唯一可以从GPU渲染中受益的属性，如我在这里所了解的:http://www.sitepoint.com/introduction-to-hardware-acceleration-css-animations/

另一个问题:“意志改变:高度”有什么作用吗？看起来它是有效的(https://developer.mozilla.org/en-US/docs/Web/CSS/will-change)，但是它不能创建一个图层，我可以在dev工具中观察到。

最佳答案

并不是will-change或transform: translateZ()不会将您的元素提升为自己的图层，然后将其发送到您的GPU。
看看https://csstriggers.com/。您应该只设置transform和opacity的动画。即使使用will-change，任何其他属性也会导致重新绘制或重新计算布局。

关于html - 'will-change'或translateZ()hack会提高 'transition: height'的性能吗？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/35361310/