'will-change'或translationZ（）hack会提高'transition：height'的性能吗？

Question

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

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

在Chrome开发工具中，我可以看到每个手风琴项目都得到了一层（由于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），但是它不能创建图层，我可以在开发工具中观察到。

Answer 1

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