Considérations pour les performances de transition CSS3

Dans le cadre d'un projet qui a besoin de l'appui des appareils mobiles, j'ai travaillé sur imitant l'iPhone bascule de contrôle à l'aide de CSS3. J'ai le regard et la sensation de l'élément à peu près là, et je suis à l'aide de transitions CSS3 pour animer son changement d'état.

Quand j'ai de l'élément lui-même sur une page avec rien d'autre, la transition est relativement lisse sur iOS. Cependant, quand je le combiner avec d'autres CSS des éléments sur une page, le résultat, iOS est lag comme quoi que ce soit. C'est légèrement mieux qu'un raw jQuery animation, mais pas beaucoup.

J'ai mis en place deux pages de test pour démontrer ce que je veux dire (la différence est à peine perceptible dans un navigateur classique):

Bascule de Contrôle sur sa propre > http://ben-major.co.uk/labs/iPhone%20UI/ios_toggle.html

Combiné avec d'autres éléments > http://ben-major.co.uk/labs/iPhone%20UI/

Je suis à la recherche pour obtenir des conseils sur l'accélération de la transition dans les appareils mobiles. Quels pourraient être les facteurs qui ralentissent sa performance sur toute la page de test?

Tous les conseils et commentaires bienvenus.

source d'informationauteur BenM

  1. 23

    Vous devez être prudent avec cela, car il peut modifier le z-index de l'élément, il est appliqué, mais en ajoutant:

    -webkit-transform-style: preserve-3d;

    À l'élément que vous êtes à l'application de la transition, de la vitesse de l'animation considérablement, puisqu'il force le matériel à utiliser l'accélération matérielle pour l'animation.

    Si vous rencontrez des bugs de mise en page, vous pouvez simplement passer vos transitions 2d à la 3d, des valeurs, donc:

    -webkit-transform: translate(100px, 100px)

    devient:

    -webkit-transform: translate3d(100px, 100px, 0px)

    Vous pouvez voir une démonstration de la façon dont cela permet d'accélérer les choses, à http://stickmanventures.com/labs/demo/spinning-gears-Chrome-preserve-3d/#

    Si après l'application de l'élément, vous le voyez ou les éléments autour d'elle clignote lors de l'utilisation, puis utiliser:

    -webkit-backface-visibility: hidden;

    À l'élément, et qui devrait corriger le problème.

    Ces conseils m'ont aidé à produire, rapide et efficace, les transitions CSS, j'espère qu'ils vous aider. 🙂

  2. 3

    Chrome a récemment amélioré la 2D à la transition de la performance, et maintenant, cette astuce n'est plus nécessaire. La meilleure chose est que s'il a été retiré de la translate3d vous n'aurez plus ces z-index de problèmes! Utiliser le test pour le prouver. http://stickmanventures.com/labs/demo/spinning-gears-Chrome-preserve-3d/

  3. 2

    vous pouvez également essayer will-change: transform; , lire plus à ce sujet ici:
    https://developer.mozilla.org/en-US/docs/Web/CSS/will-change#Browser_compatibility

  4. 0

    Je pense qu'il est assez vieux déjà, mais pour quelqu'un qui a encore besoin d'astuces pour améliorer la performance des transitions sur le périphérique mobile, vous pouvez appliquer :
    -webkit-transform: translateZ(0);
    à l'élément à animer.
    Cette astuce est en fonction de ce blog : http://chrissilich.com/blog/fix-css-animation-slow-or-choppy-in-mobile-browsers/.
    J'ai essayé et il fonctionne très bien.