'will-change' 或 translateZ() hack 是否会提高 'transition: height' 的任何性能答案

【问题标题】：Does 'will-change' or the translateZ() hack improve any performance on 'transition: height''will-change' 或 translateZ() hack 是否会提高 'transition: height' 的任何性能
【发布时间】：2017-11-09 23:32:47
【问题描述】：

我正在构建一个在打开/关闭时具有动画高度的手风琴，其中内容高度是通过 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/

另一个问题：'will-change: height' 有什么作用吗？看起来它是有效的 (https://developer.mozilla.org/en-US/docs/Web/CSS/will-change)，但它没有创建图层，我可以在开发工具中观察。

【问题讨论】：

我找到的最新信息在这里github.com/operasoftware/devopera/pull/330 如果这是当前状态，否，将更改：高度不会在 Chrome 中创建图层。但请注意，这是高度特定于浏览器的

标签： html css css-transitions

【解决方案1】：

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

【讨论】：