web-dev-qa-db-fra.com

Comment optimiser les animations CSS 3 pour iOS / Mobile Safari?

Je crée une application iPad à l'aide de PhoneGap. J'essaie d'utiliser des transformations CSS pour l'animation, mais je ne suis pas entièrement sûr d'utiliser les méthodes appropriées pour tirer parti de l'accélération matérielle que le périphérique pourrait prendre en charge.

C'est une fenêtre modale (DIV) que je souhaite faire glisser du haut de la page. Il commencerait par être positionné en haut de l'écran, puis animé 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 légèrement saccadée. Ce n'est pas une animation entièrement fluide. Dois-je utiliser un CSS différent pour gérer cela? Ou est-ce peut-être juste un effet secondaire d'être une application PhoneGap et la DIV en question ayant une grande image de fond?

ioswebkitcss-animations
38
DA.

Vous devez au moins ajouter une déclaration translate3d vide:

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

Cela aidera énormément les performances sur iOS, comme le démontre Remy Sharp , car cela oblige iOS à utiliser l'accélération matérielle.

Si vous voulez aller plus loin, refactorisez l'animation pour utiliser une transformation de traduction de webkit, plutôt que d'animer la propriété 'top'. Dans la propriété transform3d, le deuxième paramètre est la valeur Y. Dans votre exemple, modifiez le -webkit-transition Pour vous concentrer sur la propriété de transformation, plutôt que sur le haut. Ensuite, définissez un webkit-transform Initial de translate3d(0,0,0).

Pour effectuer votre animation, changez votre déclaration de classe .modal.modalOn En:

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

Cela entraînera iOS pour animer la transformation de l'élément, et devrait être encore plus fluide que la première méthode.

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

94
Benjamin Mayo

essayez d'ajouter:

webkit-backface-visibility: hidden;
3
Alon