html - 'will-change' 或 translateZ() hack 是否提高了 'transition: height' 上的任何性能

Question

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

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

在 Chrome 开发工具中，我可以看到 Accordion 元素每个都有一个层(因为 will-change 和/或转换属性)，但这会导致任何性能提升吗？
或者变换、不透明度和过滤器是唯一可以从 GPU 渲染中受益的属性，正如我在此处理解的: http://www.sitepoint.com/introduction-to-hardware-acceleration-css-animations/

另一个问题:'will-change: height' 有什么作用吗？看起来它是有效的( 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，任何其他属性也会导致重新绘制或重新计算布局。 .