transformer:translateX vs transition sur la gauche de la propriété. Qui a la meilleure performance? CSS
Je suis en train de faire un menu coulissant avec HTML et CSS3 - en particulier les transitions.
Je voudrais savoir quelles sont les meilleures pratiques et les meilleures performances pour glisser une position relative div horizontalement. Lorsque je clique sur un bouton, il ajoute une classe à ma div. Quelle est la classe la mieux? (Note, je peux ajouter tous les préfixes de navigateur plus tard, et ce site ne vise que les navigateurs modernes).
//option 1
.animate{
-webkit-transition:all ease 0.3s;
-webkit-transform:translateZ(200px);
}
//option 2
.animate{
-webkit-transition:all ease 0.3s;
left:200px;
}
Grâce
OriginalL'auteur JackMahoney | 2012-11-16
Vous devez vous connecter pour publier un commentaire.
Transitions via traduire effectue BEAUCOUP mieux sur les appareils mobiles!
Edit:
Voici une démo en live. Les Transitions avec
translateX
ettranslateY
sont beaucoup plus lisses quetop
,bottom
,left
etright
.jsFiddle de Démonstration pour les appareils mobiles
Je suis en train de construire une webapp pour l'iPad pour le moment. Et de la performance avec translateX et translateY est BEAUCOUP mieux que la gauche, la droite, le haut et le bas. Mais Si vous le faites uniquement pour les navigateurs de bureau, vous verrez pas de différence. Et il y a une autre différence. si vous animer à gauche: 100% de l'élément sera animé à 100% des parents largeur. Et si vous animez translateX(100%) de l'élément sera animé à 100% de sa largeur. Je n'ai pas de tests ou d'articles à l'instant - juste mon expérience 😉 mais je vais préparer un jsFiddle aujourd'hui...
Regardez cette. il suffit de passer (ou cliquez sur le mobile) sur la gauche et un côté droit. le translateY les transitions sont bien plus fluide sur mon iPad 3. jsfiddle.net/philippkuehn/wLm87
il suffit d'ajouter une cas maintenant. transformer, c'est bien mieux que de transition pour les performances sur l'iphone
Le violon dans cette réponse vient de me rendre compte que mon translateX n'étais pas de travail parce que j'avais
position: absolute;
.OriginalL'auteur
translateX et translateY est beaucoup plus lisse que gauche, droite, haut, bas et jQuery animate versions.
Voir cette beaucoup plus de détails avec la démo:
http://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/
OriginalL'auteur