40

我正在使用 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 具有大背景图像的副作用？

4

2 回答 2

95

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

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

正如Remy Sharp所证明的那样，这将极大地提高 iOS 上的性能，因为它会导致 iOS 使用硬件加速。

如果你想更进一步，重构动画以使用 webkit 翻译转换，而不是动画 'top' 属性。在 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);行不通的。

于 2011-06-26T13:09:31.280 回答
3

尝试添加：

webkit-backface-visibility: hidden;
于 2012-06-27T06:50:44.140 回答