是否会改变＆＃39;或者translateZ（）hack改善了过渡时的任何表现：身高＆＃39;

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/

另一个问题：是否会改变：身高＆＃39;做任何事情？看起来它有效（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，任何其他属性都会导致重绘或布局重新计算。