css - entre - animaciones angular 6
Animación angular 2 vs animación css: ¿cuándo usar qué? (2)
Actualmente estoy probando la animación de angular2 y me preguntaba qué ventaja específica aportan sobre las animaciones / transiciones css estándar.
Por ejemplo, un material típico diseñado con tarjeta y efectos flotantes con las sombras de la caja. La mayoría de los frameworks css usan: hover y css-transitions. ¿Hay alguna ventaja particular en el uso de animaciones angulares 2?
Leí en alguna parte que algunas propiedades de animación css no invocan tanto a la GPU, por lo que hay retrasos y retrasos. ¿Qué pasa con las animaciones angular2?
La pregunta es en realidad más animación javascript vs animación css (porque las animaciones de angular2 se basan en la animación javascript).
La respuesta es que cuando puedes - usa la animación CSS .
Los navegadores modernos utilizan un hilo diferente para la animación CSS, por lo que el javascript-hilo no se ve afectado por las animaciones CSS.
Puede usar la prueba de velocidad de animación HTML5 para verificar el rendimiento de diferentes animaciones VS CSS de marcos (basadas en javscript) en su navegador.
En general:
Los navegadores son capaces de optimizar los flujos de representación. En resumen, siempre debemos intentar crear nuestras animaciones utilizando transiciones / animaciones CSS siempre que sea posible. Si sus animaciones son realmente complejas, es posible que deba depender de animaciones basadas en JavaScript.
Si desea saber específicamente acerca de las animaciones Angular2, simplemente inspeccione el elemento en su navegador y verifique si la animación es un CSS (transición / animación basada en cuadro o javascript (podrá ver los valores en el cambio de atributo de style durante la animación ).
La respuesta está en realidad en los documentos:
https://angular.io/guide/animations
El sistema de animación de Angular le permite crear animaciones que se ejecutan con el mismo tipo de rendimiento nativo que las animaciones de CSS puro. También puede integrar estrechamente su lógica de animación con el resto del código de su aplicación, para facilitar el control.
También abstrae la necesidad de realizar un seguimiento de la duración de las animaciones para escalonar y evitar la sobrecarga del navegador, o en las animaciones de encadenamiento.
En general, si tienes una pequeña cosa simple, CSS es probablemente más fácil. Pero si siempre estás haciendo animación en tu aplicación, obtienes mucha potencia con poca desventaja de Angular Animations.