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

概述我正在打开/关闭动画高度的手风琴,其内容高度通过JS计算.我想确保最佳性能,所以我在考虑强制硬件加速. .accordion-item-content { overflow: hidden; transition: height .3s ease; transform: translateZ(0); will-change: transform;} 在Chrome 我正在打开/关闭动画高度的手风琴,其内容高度通过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,任何其他属性都会导致重绘或布局重新计算. 总结

以上是内存溢出为你收集整理的html – ‘will-change’或者translateZ()hack会改善’transition：height’的性能全部内容，希望文章能够帮你解决html – ‘will-change’或者translateZ()hack会改善’transition：height’的性能所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。