CSS3 转换性能的注意事项
作为需要支持移动设备的项目的一部分，我一直致力于使用 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/
我正在寻找有关加快移动设备过渡的任何建议。哪些因素可能会降低其在整页测试中的性能？
欢迎任何建议和意见。
As part of a project that needs to support mobile devices, I have been working on mimicking the iPhone toggle control using CSS3. I have the look and feel of the element pretty much there, and am using CSS3 transitions to animate its state change.
When I have the element itself on a page with nothing else, the transition is relatively smooth on iOS. However, when I combine it with other CSS elements on a page, the result in iOS is laggy as anything. It's slightly better than a raw jQuery animation, but not much.
I've set up two test pages to demonstrate what I mean (the difference is hardly noticeable in a regular browser):
Toggle Control on its own > http://ben-major.co.uk/labs/iPhone%20UI/ios_toggle.html
Combined with other elements > http://ben-major.co.uk/labs/iPhone%20UI/
I am looking for any advice on speeding up the transition in mobile devices. What could be the factors that are slowing down its performance on the full page test?
Any advice and comments welcome.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
你必须小心这一点，因为它可以改变它所应用到的元素的 z-index，但是添加：
对于你要应用过渡的元素，可以大大加快动画速度，因为它强制硬件使用动画的硬件加速。
如果您确实遇到布局错误，您可以将 2d 过渡切换为 3d 值，因此：
变为：
您可以在 http://stickmanventures.com/labs/demo/spinning-gears-Chrome-preserve-3d/#
如果将此应用到元素后，您会看到它或它周围的元素闪烁使用，然后使用：
到元素，这应该可以纠正问题。
这些技巧帮助我制作了快速、高效的 CSS 过渡，希望它们能有所帮助。 :)
You have to be careful with this, as it can alter the z-index of the element it's applied to, but adding:
To the element you're applying the transition to, can speed animation up considerably, as it forces the hardware to use hardware acceleration for the animation.
If you do encounter layout bugs, you can just switch your 2d transitions to 3d values, so:
becomes:
You can see a demo of how this helps speed things up, at http://stickmanventures.com/labs/demo/spinning-gears-Chrome-preserve-3d/#
If after applying this to the element, you see it or elements around it blink upon use, then use:
To the element, and that should correct the problem.
These tips have helped me to produce fast, efficient CSS transitions, hope they help. :)
Chrome 最近改进了 2D 过渡性能，现在不再需要这个技巧了。最好的事情是，如果删除 translate3d，您将不再遇到这些 z-index 问题！用测试来证明。 http://stickmanventures.com/labs/demo/spinning-gears- Chrome-preserve-3d/
Chrome has recently improved the 2D transition performance, and now this trick is no longer needed. The best thing is that if removed the translate3d you'll no longer have those z-index problems! Use the test to prove. http://stickmanventures.com/labs/demo/spinning-gears-Chrome-preserve-3d/
您也可以尝试
will-change:transform;，在此处阅读更多相关信息：https://developer.mozilla.org/en-US /docs/Web/CSS/will-change#Browser_compatibility
also you can try
will-change: transform;, read more about it here:https://developer.mozilla.org/en-US/docs/Web/CSS/will-change#Browser_compatibility
我认为它已经很老了，但是对于仍然需要技巧来提高移动设备上的过渡性能的任何人，您可以应用：
-webkit-transform: 翻译Z(0);
到您正在设置动画的元素。
这个技巧是根据这个博客： http: //chrissilich.com/blog/fix-css-animation-slow-or-choppy-in-mobile-browsers/。
我已经尝试过并且效果很好。
I think it quite old already but for anyone who still needs tricks to improve the transition performance on mobile device, you can apply :
-webkit-transform: translateZ(0);
to the element you are animating.
This trick is according to this blog : http://chrissilich.com/blog/fix-css-animation-slow-or-choppy-in-mobile-browsers/.
I have tried and it works quite well.