'will-change'或者translateZ（）hack会改进'transition：height'的任何性能

Question

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

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

在Chrome开发工具中，我可以看到accordion-items每个都获得一个图层（因为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任何其他属性都会导致重绘或布局重新计算。