angular 2 animación vs animación css - ¿cuándo usar qué?
Actualmente estoy probando la animación de angular2 y me preguntaba qué ventaja específica traen sobre las animaciones/transiciones CSS estándar.
Por ejemplo, una tarjeta de material típico diseñada y efectos de hover con las sombras de caja. La mayoría de los frameworks css usan: hover y css-transitions. ¿Hay una ventaja particular en el uso de animaciones angular 2?
He leído en alguna parte que algunas propiedades de animación CSS no invocan la GPU tanto, por lo tanto hay retrasos y retrasos. Lo acerca de las animaciones angular2?
2 answers
La pregunta es en realidad más animación javascript vs animación css (porque las animaciones de angular2 se basan en javascript-animación).
La respuesta es que cuando se puede - usar animación CSS.
Los navegadores modernos usan un hilo diferente para la animación CSS, por lo que el hilo javascript no se ve afectado por las animaciones CSS.
Puede usar la Prueba de Velocidad de Animación HTML5 para verificar el rendimiento de diferentes frameworks (basado en javscript) VS animación CSS en su navegador.
En general:
Los navegadores pueden optimizar los flujos de renderizado. En resumen, siempre debemos intentar crear nuestras animaciones usando transiciones/animaciones CSS cuando sea posible. Si sus animaciones son realmente complejas, puede que tenga que confiar en animaciones basadas en JavaScript en su lugar.
Si desea saber específicamente con respecto a las animaciones Angular2-simplemente inspeccione el elemento en su navegador y compruebe si el animación hay un CSS (basado en transition / animationFrame o javascript (podrá ver los valores en el cambio de atributo style durante la animación).
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-12-03 15:28:33
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 el mismo tipo de rendimiento nativo que se encuentra en las animaciones CSS puras. Puedes también integrar estrechamente su lógica de animación con el resto de su código de aplicación, para facilitar el control.
También abstrae la necesidad de realizar un seguimiento de las longitudes de las animaciones con el fin de tambalearse y evitar sobrecargar el navegador, o encadenar animaciones.
Generalmente, si tienes una pequeña cosa simple, CSS es probablemente más fácil. Pero si usted está constantemente haciendo animación en su aplicación se obtiene una gran cantidad de poder con poco lado negativo de las animaciones Angulares.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-09-27 15:48:31