适合iOS / Mobile Safari优化CSS 3动画的正确方法？ [英] Proper way to optimize CSS 3 animations for iOS/Mobile Safari?

问题描述

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

I'm building an iPad app using PhoneGap. I'm trying to use CSS transformations for the animation, but I'm not entirely sure I'm using the proper methods to leverage any hardware acceleration the device might support.

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

It's a modal window (DIV) that I want to slide down from the top of the page. It'd start positioned off the top of the screen, then animated into the page itself via adding a class via 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有一个大的背景图像？

When deployed onto the iPad 2 with iOS 4, this works, but the animation is slightly jerky. It's not an entirely smooth animation. Should I be using different CSS to handle this? Or is this perhaps just a side-effect of it being a PhoneGap app and the DIV in question having a large background image?

推荐答案

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

You should at minimum add an empty translate3d declaration:

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

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

This will help performance immensely on iOS, as demonstrated by Remy Sharp, because it causes iOS to use hardware-acceleration.

如果你想要更进一步，重构动画以使用webkit翻译变换，而不是动画顶部属性。在transform3d属性中，第二个参数是Y值。在您的示例中，更改 -webkit-transition 以关注转换属性，而不是顶部。然后，设置的初始 webkit-transform translate3d（0,0,0）。

If you want to go further, refactor the animation to use a webkit translation transform, rather than animating the 'top' property. In the transform3d property, the second parameter is the Y value. In your example, change the -webkit-transition to focus on the transform property, rather than top. Then, set an initial webkit-transform of translate3d(0,0,0).

要执行动画，请将您的班级 .modal.modalOn 声明更改为：

To perform your animation, change your class .modal.modalOn declaration to:

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

这将导致iOS动画元素的变换，并且应该比第一种方法更平滑。

This will cause iOS to animate the transform of the element, and should be even smoother, than the first method.

- 注意 -
不要忘记添加一个测量单位，如px或em - 类似于转换：translate3d（0,80,0）; 将无效。

-- Note -- Don't forget to add a unit of measurement like px or em — something like transform: translate3d(0,80,0); won't work.

这篇关于适合iOS / Mobile Safari优化CSS 3动画的正确方法？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！