“will-change”或translateZ() hack是否可以提高“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)，但是它没有创建一个层，我可以在dev工具中观察到。

Answer 1

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