正确的方法来优化iOS / Mobile Safari的CSS 3animation？

我正在使用PhoneGap构build一个iPad应用程序。 我试图为animation使用CSS转换，但我不完全确定我正在使用正确的方法来利用设备可能支持的任何硬件加速。

这是一个模式窗口（DIV），我想从页面顶部向下滑动。 它会从屏幕的顶部开始定位，然后通过jquery添加一个类来animation到页面本身：

.modal { background: url('..http://img.dovov.combgnd-modal.png'); width: 800px; height: 568px; position: absolute; top: -618px; left: 100px; z-index: 1001; -webkit-transition: top .25s ease-in; } .modal.modalOn { top: 80px; } 

当部署到iOS 4的iPad 2上时，这是有效的，但是animation稍微有些生涩。 这不是一个完全stream畅的animation。 我应该使用不同的CSS来处理这个问题吗？ 或者，这可能只是一个PhoneGap应用程序的副作用，而且有一个大背景图像的DIV？

Answer 1

你至less应该添加一个空的translate3d声明：

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

这将有助于iOS上的性能，正如Remy Sharp所展示的，因为它会导致iOS使用硬件加速。

如果您想进一步研究，请重构animation以使用Webkit转换转换，而不是使用“顶级”属性进行animation制作。 在transform3d属性中，第二个参数是Y值。 在你的例子中，更改-webkit-transition以专注于transform属性，而不是顶部。 然后，设置translate3d(0,0,0)的初始webkit-transform 。

要执行animation，请将您的类.modal.modalOn声明更改为：

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

这将导致iOS对元素的转换进行animation处理，而且应该比第一种方法更平滑。

– 注意 – 不要忘记添加像px或em这样的度量单位 – 类似transform: translate3d(0,80,0); 将无法工作。

Answer 2

尝试添加：

 webkit-backface-visibility: hidden;