javascript - sirve - tag code html w3schools

¿Cuál es el propósito de las animaciones angulares?

Question

Hace tiempo que me pregunto por qué debería usar animaciones angulares sobre animaciones CSS . Veo algunas áreas que uno podría considerar antes de usarlas:

Actuación

En el primer paso encontré esta question que trata solo con el lado del rendimiento de las cosas. La respuesta aceptada no es satisfactoria para mí porque dice que uno debería usar animaciones CSS siempre que sea posible para que se puedan aplicar optimizaciones como ejecutar las animaciones en un hilo separado . Esto no parece ser cierto, porque la documentación angular indica

Las animaciones angulares se construyen sobre la API de animaciones web estándar y se ejecutan de forma nativa en los navegadores compatibles.

(énfasis mío)

Y cuando observamos el borrador de la API de animaciones web , vemos que se pueden aplicar las mismas optimizaciones a las animaciones web que a las CSS especificadas en las hojas.

Si bien es posible usar ECMAScript para realizar la animación utilizando requestAnimationFrame [HTML], dichas animaciones se comportan de manera diferente a la animación declarativa en términos de cómo se representan en la cascada de CSS y las optimizaciones de rendimiento posibles, como realizar la animación en un hilo separado. . Usando la interfaz de programación de animaciones web , es posible crear animaciones desde scripts que tengan las mismas características de comportamiento y rendimiento que las animaciones declarativas .

(énfasis mío de nuevo)

Aparte de algunos navegadores como IE no son compatibles con animaciones web, ¿hay alguna razón para usar declaraciones CSS en animaciones angulares o viceversa? Los veo como intérpretes intercambiables.

Más control sobre las animaciones.

Esto podría parecer un argumento para las animaciones angulares, porque puede pausar la animación o usar las variables JS con ella, etc., pero lo mismo es cierto cuando se usa, por ejemplo. CSS animation-play-state: pause o uso de las variables CSS especificadas en JS, consulte la documentation .

Ahora puedo ver que podría ser un inconveniente configurar las variables CSS en el código JS, pero lo mismo ocurre cuando se usan animaciones angulares. Por lo general, estos se declaran en animations campo de animations @Component y no tienen, excepto a través de la propiedad de enlace de datos de estado de la animación, acceso a los campos de instancia (si no crea su animación a través de AnimationBuilder por supuesto, lo que por cierto tampoco es muy conveniente o hermosa tampoco).

Otro punto es que con Web Animations API es posible inspeccionar, depurar o probar las animaciones, pero no veo cómo esto es posible con las animaciones angulares. Si es así, ¿podría por favor mostrarme cómo? Si no es así, realmente no veo ninguna ventaja de usar animaciones angulares sobre las de CSS por control .

Código limpiador

He leído, por ejemplo, here un párrafo que indica que separar las animaciones de los estilos "normales" es en realidad una separación de comportamiento y presentación. ¿Realmente está declarando animaciones en hojas de estilos mezclando esas responsabilidades? Lo vi siempre de la otra manera, especialmente al observar las reglas de CSS en las animaciones de @Component me dio la sensación de tener declaraciones de CSS en muchos lugares.

Entonces, ¿cómo es con animaciones angulares?

• ¿Es solo una utilidad de conveniencia para extraer animaciones del resto de estilos, o trae algo digno de características?
• ¿Un uso de las animaciones angulares se paga solo en casos especiales o es una convención que un equipo elige ir hasta el final?

Me encantaría conocer las ventajas tangibles del uso de animaciones angulares. Gracias chicos por adelantado!

Answer 1

Así que investigué un poco y, aunque no encontré ningún argumento a favor ni en contra de las animaciones angulares en cuanto al rendimiento (como ya se dijo en la pregunta anterior), existen muy buenos argumentos para usar las animaciones en ángulos que deben ser lo suficientemente buenas para Los puristas que quieren tener CSS solo en hojas, al menos en ciertos casos, lo ilustraré a continuación.

Permítanme enumerar algunas características útiles de las cuales cada uno por sí solo es un caso convincente para las animaciones angulares, la mayoría de ellas se pueden encontrar en la documentación de animaciones angulares :

1. Estilos de transición : estos estilos solo se aplican durante la transición de un estado a otro, solo mientras un elemento está siendo animado, y uno los usa así:

   transition(''stateA => stateB'', [style({...}), animate(100)])

   Intentar hacer lo mismo sin Angular requeriría una animación CSS en los estilos ''stateB'' con la misma duración que la transición o asignar estilos temporales por el momento y eliminarlos después de la duración de la animación a través de JS.

2. El estado de void ( documentation ): permite animar elementos que se agregan o eliminan del DOM.

   transition(''stateA => void'', animate(...))

   Esto es muy bueno porque anteriormente, aunque era bastante fácil animar la adición, la eliminación era más complicada y necesaria para activar la animación, esperar hasta su finalización y solo después de eso eliminar el elemento del DOM, todo con JS.

3. Cálculo automático de propiedades ''*'' ( angular.io/guide/animations#automatic-property-calculation ): permite realizar animaciones tradicionalmente difíciles como transiciones de altura para elementos con altura dinámica . Este problema era especialmente molesto para los puristas de CSS y requerían que JS verificara la altura actual de un elemento, asignándole la altura precisa y otros procedimientos para realizar una animación perfecta. Pero ahora con Angular es tan fácil como esto:

   trigger(''collapsible'', [
     state(''expanded'', style({ height: ''*'' })),
     state(''collapsed'', style({ height: ''0'' })),
     transition(''expanded <=> collapsed'', animate(100))
   ])

   Y la animación es suave porque la altura real del elemento se utiliza para la transición, no como en la solución de max-height prevalente.

4. Devolución de llamadas de llamada ( angular.io/guide/animations#animation-callbacks ): esto es algo que no era exactamente posible con las animaciones de CSS (si no se emula tal vez con setTimeout ) y es útil, por ejemplo. para la depuración.

5. A diferencia de lo establecido en la pregunta, en realidad es posible usar campos de instancia como parámetros en animaciones angulares , vea esta pregunta . Me parece mucho más fácil de usar que manipular variables CSS a través de la API DOM como se muestra documentation .

Está claro que si necesita una de las funciones enumeradas anteriormente, Angular es el camino a seguir. También cuando hay muchas animaciones para administrar en un componente, y esto es solo mi opinión personal, me resulta más fácil organizar las animaciones de forma angular que tenerlas en hojas, donde es más difícil también ver las relaciones entre los distintos estados de los elementos.