2

网络上有几个关于使用 CSS3 translate3d 指令在某些移动设备(iPhone 等)上强制硬件加速的参考资料。然而,虽然其中大部分都非常详细地介绍了 translate3d,但我发现没有一个能准确解释如何使用它。因此,如果我正确实施它,我会发现自己在徘徊,因为我的动画仍然有点卡顿。我的问题是:

1:你是将它应用到你将要制作动画的元素(动态创建的)(滑入等),还是你只是将它全局应用到body元素?

2:在动态创建元素时以编程方式将样式规则应用于元素是否更好,或者创建css规则(例如类)并将规则应用于元素更好(是否有某种形式的预编译会发生这种情况还是性能提升?)

3:我可以利用任何其他技巧来获得如丝般流畅的用户体验吗?是快速获胜还是复杂的解决方法?

谢谢

4

2 回答 2

1

-webkit-transform: translate3d(0, 0, 0);

如果将此 css 属性应用于任何元素,它将强制设备使用硬件加速。我已经应用它来解决 Ipad2 上的渲染问题,比如“空白”

我说过应用这个对于设备来说真的很重,所以,你可以让你的应用程序崩溃。我的建议; 如果您将其应用于少数元素,请使用此技巧。

http://davidwalsh.name/translate3d

于 2013-01-29T18:16:20.270 回答
0

1)老实说,我不知道:P 我只会将过渡应用于元素。

2) 更改类而不是应用样式规则更快。资料来源:http ://www.quirksmode.org/dom/classchange.html 此外,您将风格和行为分开。最新版本的 Desktop Opera 的行为也与其他浏览器一样。不过,我对移动浏览器一无所知。

3) 对于技术优化检查yslowpagespeed firefox 插件。这里有大多数建议的汇编:http: //developer.yahoo.com/performance/rules.html

于 2011-09-01T04:59:55.817 回答