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翻译变换，而不是动画'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);这样的单位将不起作用。

Answer 2

尝试添加：

webkit-backface-visibility: hidden;

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

2 个答案: