html – ‘will-change’或者translateZ()hack会改善’transition：height’的性能

2023年2月22日 200次阅读

我正在打开/关闭动画高度的手风琴,其内容高度通过JS计算.我想确保最佳性能,所以我在考虑强制硬件加速.

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

在Chrome开发工具中,我可以看到accordion-items每个都获得一个图层(因为will-change和/或transform属性),但是这会导致任何性能提升吗？
或者是转换,不透明和过滤唯一可以从GPU渲染中受益的属性,我在这里理解：http://www.sitepoint.com/introduction-to-hardware-acceleration-css-animations/

另一个问题：“会改变：身高”会做什么吗？看起来它是有效的(https://developer.mozilla.org/en-US/docs/Web/CSS/will-change),但它不会创建一个图层,我可以在开发工具中观察到.

最佳答案 不会真正改变或转换：translateZ()会将你的元素提升到它自己的层,然后将它发送到你的GPU.

看看
https://csstriggers.com/.你应该只为变换和不透明度设置动画.即使您使用will-change,任何其他属性都会导致重绘或布局重新计算.

点赞