-webkit-transition-propriété pour la traduction

Question

Hai.
Quelle est la propriété de transition pour les traductions dans CSS3? J'utilise actuellement all mais j'ai un bug dans iOS alors je veux tester une autre propriété.

-webkit-transform: translate(-320px, 0); 

 

-webkit-transition: ??? .5 ease-in-out; 

Voir le bogue avec un appareil iOS here (swipe horizontalement), il y a une sorte de flash.

---

Mise à jour: à toute personne intéressée, je l'ai trouvé un moyen de le réparer grâce à Duopixel:

E { 
    -webkit-transition: all .5s ease-in-out; 
    -webkit-transform: translate3d(0, 0, 0); // perform an "invisible" translation 
} 

// Then you can translate with translate3d(), no bug! 
document.querySelector('E').webkitTransform = 'translate3d(-320px, 0, 0)' 

Answer 1

Il y a des tonnes de choses que vous pouvez transition, le plus facile à tester dans mon expérience est opacité.

Cependant, j'ai rencontré le problème clignotant avant, essayez:

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

Cela coup de pied dans l'accélération matérielle, ce qui résout le problème et rend l'animation extrêmement lisse.

Answer 2

Votre solution fonctionnera, mais la réponse exacte que vous recherchiez est -webkit-transform.

-webkit-transition: -webkit-transform .5s ease-in-out;