Transitions CSS3: Est la “transition: tous plus lent que la “transition: x”?
J'ai une question à propos de la vitesse de rendu pour le css3 transition de la propriété.
Supposons que j'ai un certain nombre d'éléments:
div, span, a {transition: all}
div {margin: 2px}
span {opacity: .5}
a:hover {background-position: left top}
div:hover {margin: -100px}
span:hover {opacity: 1}
a:hover {background-position: -5px top}
Il est beaucoup plus efficace de cibler toutes les transitions pour l'ensemble de ces éléments à l'aide de l'une déclaration div, span, a {transition: all}
. Mais ma question est: serait-il "plus vite" dans les termes de la fluidité et de la rapidité de l'animation, le rendu de la cible de chaque élément spécifique de la transition de la propriété? Par exemple:
div {margin: 2px; transition: margin .2s ease-in}
span {opacity: .5; transition: opacity .2s ease-in}
a {background-position: left top; transition: background .2s ease-in}
div:hover {margin: -100px}
span:hover {opacity: 1}
a:hover {background-position: -5px top}
Ma logique en demandant cela, c'est que si le css de "moteur" à cause de la recherche pour "tous" les propriétés de transition, même s'il y a une propriété unique pour un élément, qu'il pourrait ralentir les choses.
Personne ne sait si c'est le cas? Merci!
- Ça a toujours été ma théorie, mais je n'ai jamais remarqué aucune différence dans la pratique.
- Je m'attends à ce que de l'effectuer réellement l'animation à l'écran serait beaucoup, beaucoup plus cher que l'analyse de CSS. À moins que vous abuser du système, je ne m'inquiéterais pas trop à ce sujet.
- Je pense que si il y a une différence, il serait en millisecondes, mais je veux savoir si même il y a une différence minutes. merci pour vos commentaires
- Cela hurle "les fournisseurs spécifiques de mise en œuvre détail" pour moi...
Vous devez vous connecter pour publier un commentaire.
Oui, à l'aide de
transition: all
pourrait causer des inconvénients majeurs de la performance. Il peut y avoir beaucoup de cas où le navigateur ressemblerait si elle a besoin de faire une transition, même si l'utilisateur ne le voyez pas, comme les changements de couleur, dimension des changements etc.L'exemple le plus simple je pense est de cette: http://dabblet.com/gist/1657661 — essayer de changer le niveau de zoom ou de la taille de la police et vous verrez que tout est animée.Bien sûr, il ne pouvait pas être beaucoup de ces interactions de l'utilisateur, mais il pourrait y avoir quelques modifications de l'interface, qui peut causer la refusion et repeint dans certains blocs, qui pourrait dire au navigateur d'essayer et d'animer ces changements.
Donc, en général, il est recommandé de ne pas utiliser le
transition: all
et serait d'utiliser directement les transitions à la place.Il ya quelques autres choses qui peuvent mal se passer avec la
all
transitions, comme le splash de l'animation au chargement de la page, où il pouvait dans un premier temps rendre les styles initiaux pour les blocs et ensuite appliquer le style avec une animation. Dans beaucoup de cas, il pourrait ne pas être la chose que vous voulez 🙂J'ai été en utilisant
all
pour les cas où j'avais besoin d'animer plus d'une règle. Par exemple, si je voulais changer lecolor
&background-color
sur:hover
.Mais il s'avère que vous pouvez cibler plus d'une règle pour les transitions, de sorte que vous n'avez jamais besoin de recourir à la
all
réglage.