'will-change'或 translateZ() 黑客是否会提高'transition: height'的性能

Question

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

.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），但它不会创建层，我可以在开发工具中观察到。

Answer 1

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