CSS3过渡性能的考虑因素

Question

作为需要支持移动设备的项目的一部分,我一直在使用CSS3模仿iPhone切换控制.我有很多元素的外观和感觉,并使用CSS3过渡来动画其状态变化.

当我将元素本身放在没有其他内容的页面上时,iOS上的转换相对平滑.但是,当我将它与页面上的其他CSS元素结合使用时,iOS中的结果就像任何东西一样滞后.它比原始的jQuery动画略好,但并不多.

我已经设置了两个测试页面来演示我的意思(在常规浏览器中差异很小):

切换控制本身> http://ben-major.co.uk/labs/iPhone%20UI/ios_toggle.html

结合其他元素> http://ben-major.co.uk/labs/iPhone%20UI/

我正在寻找有关加快移动设备过渡的任何建议.在整页测试中可能会降低其性能的因素有哪些？

任何建议和意见欢迎.

Answer 1

你必须小心这一点,因为它可以改变它所应用的元素的z-index,但是添加:

-webkit-transform-style: preserve-3d;

对于要应用转换的元素,可以大大提高动画速度,因为它会强制硬件对动画使用硬件加速.

如果遇到布局错误,只需将2d转换切换为3d值,即可:

-webkit-transform: translate(100px, 100px)

变为:

-webkit-transform: translate3d(100px, 100px, 0px)

您可以在http://stickmanventures.com/labs/demo/spinning-gears-Chrome-preserve-3d/#上看到有关如何帮助加快速度的演示.

如果在将元素应用到元素后,您会看到它或其周围的元素在使用时闪烁,然后使用:

-webkit-backface-visibility: hidden;

对元素,这应该纠正问题.

这些提示帮助我生成快速,高效的CSS转换,希望它们有所帮助.:)