angular 2 animation vs animation css - quand utiliser quoi?
J'essaie actuellement l'animation de angular2 et je me demandais quel avantage spécifique ils apportent par rapport aux animations/transitions CSS standard.
par exemple. un matériau typique conçu des effets de carte et de vol stationnaire 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 angular 2 animations?
J'ai lu quelque part que certaines propriétés d'animation CSS n'invoquaient pas autant le GPU, d'où des retards et des retards. Qu'en est-il des animations angular2?
La question est en fait plus animation javascript vs animation css (car les animations d'angular2 sont basées sur l'animation javascript).
La réponse est que lorsque vous pouvez - utiliser l'animation CSS .
Les navigateurs modernes utilisent fil différent pour l'animation CSS, donc le fil javascript n'est pas affecté par les animations CSS.
Vous pouvez utiliser le HTML5 Animation Speed Test pour vérifier la pré-performance des différents frameworks (basés sur javscript) VS CSS animation dans votre navigateur.
En général:
Les navigateurs sont capables d'optimiser les flux de rendu. En résumé, nous devons toujours essayer de créer nos animations en utilisant des transitions/animations CSS lorsque cela est possible. Si vos animations sont vraiment complexes, vous devrez peut-être plutôt vous baser sur des animations basées sur JavaScript.
Si vous voulez en savoir plus sur les animations Angular2 - il suffit d'inspecter l'élément dans votre navigateur et de vérifier si l'animation est en CSS (transition/animationFrame based ou javascript (vous pourrez voir les valeurs dans _ style changement d'attribut 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 qui s'exécutent avec le même type de performance native que les animations CSS pures. Vous pouvez également intégrer étroitement votre logique d'animation avec le reste du code de votre application, pour en faciliter le contrôle.
Il supprime également la nécessité de garder une trace des longueurs d'animations afin d'échelonner et d'éviter de surcharger le navigateur ou de chaîner des 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 de Angular Animations.