angulaire 2 animation vs css animation - quand utiliser quoi?
J'essaie actuellement l'animation d'angular2 et je me demandais quel avantage spécifique ils apportent sur les animations/transitions CSS standard.
Par exemple un matériau typique conçu Carte et hover effets avec les ombres de la boîte. La plupart des frameworks css utilisent: hover et CSS-transitions. Y a-t-il un avantage particulier à utiliser des animations angular 2?
J'ai lu quelque part que certaines propriétés d'animation css n'invoquent pas autant le GPU, donc il y a des retards et des retards. Quel à propos des animations angular2?
2 réponses
La question Est en fait plus animation javascript vs animation CSS (parce que les animations d'angular2 sont basées sur javascript-animation).
La réponse est que lorsque vous pouvez - Utiliser l'animation CSS .
Les navigateurs modernes utilisent thread différent pour l'animation CSS, de sorte que le JavaScript-thread n'est pas affecté par les animations CSS.
Vous pouvez utiliser le test de vitesse D'Animation HTML5 pour vérifier la préformance des différents frameworks (basé sur javscript) VS animation CSS dans votre navigateur.
En général:
Les navigateurs sont capables d'optimiser les flux de rendu. En résumé, nous devrions toujours essayer de créer nos animations en utilisant des transitions/animations CSS si possible. Si vos animations sont vraiment complexes, vous devrez peut-être compter sur des animations basées sur JavaScript à la place.
Si vous voulez savoir spécifiquement en ce qui concerne les animations Angular2-inspectez simplement l'élément dans votre navigateur et vérifiez si le animation il y a un CSS (transition/animationFrame based ou javascript (vous pourrez voir les valeurs dans le changement d'attribut style pendant l'animation).
La réponse est en fait dans les documents:
Https://angular.io/guide/animations
Le système D'animation D'Angular vous permet de créer des animations même type de performance native trouvée dans les animations CSS pures. Vous pouvez intégrez également étroitement votre logique d'animation avec le reste de votre code d'application, pour faciliter le contrôle.
Il supprime également la nécessité de garder une trace des longueurs d'animations afin de décaler et d'éviter surcharger le navigateur ou enchaîner les animations.
Généralement, si vous avez une petite chose simple, CSS est probablement plus facile. Mais si vous faites constamment de l'animation dans votre application, vous obtenez beaucoup de puissance avec peu d'inconvénients des Animations angulaires.