Une bonne façon d'optimiser les animations CSS 3 pour iOS/Mobile Safari ?

Question

Je suis en train de construire une application iPad à l'aide de PhoneGap. Je suis en train d'utiliser les transformations CSS pour l'animation, mais je ne suis pas entièrement sûr que je suis en utilisant les méthodes appropriées à effet de levier, l'accélération matérielle de l'appareil peut prendre en charge.

C'est une fenêtre modale (DIV) que j'ai envie de glisser vers le bas à partir du haut de la page. Il fallait commencer par positionné sur le haut de l'écran, puis d'animation dans la page elle-même via l'ajout d'une classe 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;
  }

Lorsqu'il est déployé sur l'iPad 2 avec iOS 4, cela fonctionne, mais l'animation est un peu saccadé. Il n'est pas entièrement lisse animation. Dois-je utiliser autre feuille de style CSS pour gérer cela? Ou est-ce peut-être juste un effet secondaire d'une application PhoneGap et la DIV en question d'avoir une grande image de fond?

Answer 1

Vous devriez au minimum ajouter un vide translate3d déclaration:

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

Cela aidera considérablement les performances sur iOS, comme l'a démontré par Remy Sharp, car il provoque iOS pour utiliser l'accélération matérielle".

Si vous souhaitez aller plus loin, refactoriser l'animation d'utiliser un webkit traduction de transformation, plutôt que d'animer le sommet de la propriété. Dans le transform3d des biens, le deuxième paramètre est la valeur de Y. Dans votre exemple, changer l' -webkit-transition de se concentrer sur la transformation de la propriété, plutôt que d'en haut. Ensuite, une webkit-transform de translate3d(0,0,0).

Pour effectuer votre animation, de changer de classe .modal.modalOn déclaration à:

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

Ce sera la cause de iOS à animer la transformation de l'élément, et devrait l'être encore plus lisse, que la première méthode.

-- Note -- N'oubliez pas d'ajouter une unité de mesure comme px ou em - quelque chose comme transform: translate3d(0,80,0); ne fonctionne pas.

Answer 2

essayez d'ajouter :

Answer 3

Vous pouvez également consulter mon blog collègues sur l'animation dans Mobile Safari sur iOS. http://uncorkedstudios.com/2011/11/18/animation-performance-disparity-on-ios/