适合iOS/Mobile Safari优化CSS 3动画的正确方法？

Question

我正在使用PhoneGap构建一个iPad应用程序.我正在尝试使用CSS转换来制作动画,但我并不完全确定我正在使用正确的方法来利用设备可能支持的任何硬件加速.

这是一个模态窗口(DIV),我想从页面顶部向下滑动.它开始位于屏幕顶部,然后通过jquery添加一个类动画到页面本身:

.modal {
      background: url('../images/bgnd-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上时,这可以工作,但动画稍微不稳定.这不是一个完全流畅的动画.我应该使用不同的CSS来处理这个吗？或者这可能只是一个副作用,它是一个PhoneGap应用程序和有问题的DIV有一个大的背景图像？

Answer 1

您至少应该添加一个空的translate3d声明:

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

这将有助于iOS上的性能,正如Remy Sharp所证明的那样,因为它会导致iOS使用硬件加速.

如果你想更进一步,重构动画以使用webkit翻译变换,而不是动画"顶部"属性.在transform3d属性中,第二个参数是Y值.在您的示例中,-webkit-transition将焦点更改为转换属性,而不是顶部.然后,设置一个初始webkit-transform值translate3d(0,0,0).

要执行动画,请将类.modal.modalOn声明更改为:

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

这将导致iOS为元素的变换设置动画,并且应该比第一种方法更加平滑.

- 注意 - 不要忘记添加像px或em这样的测量单位 - 这样的方法是transform: translate3d(0,80,0);行不通的.