作为需要支持移动设备的项目的一部分,我一直在使用
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/
我正在寻找任何关于加快移动设备过渡的建议.在整个页面测试中可能会降低其性能的因素是什么？
任何建议和意见欢迎.
解决方法
你必须小心,因为它可以改变它应用到的元素的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;
对元素,这应该纠正问题.
