CSS3 Translate3D 和 iPhone 硬件加速
有几个 参考资料。然而，虽然其中大多数内容都详细介绍了translate3d，但我发现没有一篇文章准确解释了如何使用它。因此，如果我正确实现了它，我会发现自己在徘徊，因为我的动画仍然有点口吃。我的问题是：
1：您是否将其应用于要设置动画的元素（动态创建的）（滑入等），或者只是将其全局应用于 body 元素？
2：在动态创建元素时以编程方式将样式规则应用到元素是否更好，或者创建 css 规则（例如类）并将规则应用到元素是否更好（是否有某种形式的预编译发生这种情况还是性能提升？）
3：我可以利用其他技巧来获得丝般流畅的用户体验吗？是快速获胜还是复杂的解决方法？
谢谢
There are several references on the web about using the CSS3 translate3d directive to force hardware acceleration on some mobile devices (iPhone, etc). However while most of these go into great detail about translate3d none that I have found explain exactly how to use it. I therefore find myself wandering if I have implemented it correctly, since my animations are still a little stuttery. My questions are:
1: Do you apply it to the element (which is created dynamically) you are going to be animating (slide in's, etc) or do you just apply it globally to the body element for instance?
2: Is it better to apply style rules to the element programatically when the element is being created dynamically, or is it better to create a css rule (a class for instance) and apply the rule to the element (Is there some form of precompilation that happens or performance gain?)
3: Are there any other tricks I can exploit to get a silky smooth user experience? Either quick wins or convoluted workarounds?
Thanks
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
-webkit-transform: 翻译3d(0, 0, 0);
如果将此 css 属性应用于任何元素，它将强制设备使用硬件加速。我已经应用它来解决 Ipad2 上的渲染问题，例如“空白间隙”，
我说过应用这个对于设备来说确实很重，所以，你可能会让你的应用程序崩溃。
我的建议；如果您将其应用于少数元素，请使用此技巧。
http://davidwalsh.name/translate3d
-webkit-transform: translate3d(0, 0, 0);
If you apply this css property to any elements, It will force the device to use hardware acceleration. I have apply it to solve rendering issues on Ipad2 like "blank gaps"
I have say that applying this is really heavy for the device, so, you can make your app crash.
My advice; use this trick, if you apply it to few elements.
http://davidwalsh.name/translate3d
1）老实说，我不知道：P我只会将过渡应用于元素。
2）更改类比应用样式规则更快。
来源：http://www.quirksmode.org/dom/classchange.html
此外，您还可以将风格和行为分开。最新版本的 Desktop Opera 的行为也与其他浏览器类似。不过我对移动浏览器一无所知。
3) 对于技术优化，请检查 yslow 和 pagespeed 火狐插件。这里有大多数建议的汇编：http://developer.yahoo.com/performance/rules。 html
1) I honestly have no idea :P I'd go for applying transitions to the element only.
2) It's faster to change classes instead of applying style rules.
Source: http://www.quirksmode.org/dom/classchange.html
Also, you keep style and behavior separated. Most recent versions of Desktop Opera behave like other browsers as well. I have no idea about mobile browsers though.
3) For technical optimizations check yslow and pagespeed firefox addons. There is a compilation of most recommendations here: http://developer.yahoo.com/performance/rules.html