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


Me he estado preguntando por un tiempo ahora ¿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é esto pregunta que trata solo con el lado performace de las cosas. La respuesta aceptada no es satisfactoria para mí porque dice que uno debe 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 Documentación angular estados

Las animaciones angulares son construido sobre la API estándar de animaciones web y ejecutar de forma nativa en navegadores compatibles.

(énfasis mío)

Y cuando miramos Borrador API de animaciones web vemos que las mismas optimizaciones pueden aplicarse a las animaciones web en cuanto a CSS especificado en las hojas.

Si bien es posible utilizar ECMAScript para realizar animaciones 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 que son posibles, como realizar la animación en un hilo separado . Usando las animaciones web interfaz de programación, es posible crear animaciones del script que tienen las mismas características de comportamiento y rendimiento que las animaciones declarativas.

(el énfasis es mío otra vez)

Además de algunos navegadores como IE no son compatibles con Web Animations, ¿Hay alguna razón para usar declaraciones de CSS sobre animaciones angulares o viceversa? Los veo como intercambiables en cuanto a rendimiento.


Más control sobre las animaciones

Esto podría verse como un argumento para las animaciones angulares, porque puedes pause animation o use variables JS con él, etc., pero lo mismo es cierto al usar, por ejemplo. CSS animation-play-state: pause o usando Variables de CSS especificado en JS, ver documentación.

Ahora puedo ver que puede ser inconveniente establecer las variables CSS en el código JS, pero lo mismo es cierto al usar animaciones angulares. Estos son típicamente declarados en @Component  animations campo y no tienen, a excepción de a través de la propiedad de enlace de datos de estado de animación, el acceso a los campos de instancia (si no crea su animación a través de AnimationBuilder por supuesto, que por cierto tampoco es muy conveniente o hermoso).

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 animaciones angulares. Si es así, ¿podrías mostrarme cómo? Si no es así, realmente No veo ninguna ventaja de usar animaciones angulares sobre CSS por el bien del control, ya sea.


Código más limpio

He leído, por ejemplo aquí un párrafo que establece que separar las animaciones de los estilos "normales" es en realidad la separación del comportamiento y la presentación. ¿Realmente está declarando animaciones en las hojas de estilos mezclando esas responsabilidades? Vi eso siempre de otra manera, especialmente mirando las reglas de CSS en el @Component las animaciones me dieron la sensación de tener declaraciones de CSS en demasiados lugares.


Entonces, ¿cómo es con las animaciones angulares?

  • ¿Es solo una utilidad práctica para extraer animaciones del resto de los estilos, o aporta algo digno de características?
  • ¿El uso de animaciones angulares se amortiza solo en casos especiales o es una convención que un equipo elige hacer con ella?

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


22
2018-04-03 11:16


origen


Respuestas:


Así que investigué y aunque no encontré ningún argumento a favor ni en contra de las animaciones angulares en cuanto a rendimiento (como ya se dijo en la pregunta anterior), hay muy buenos argumentos para usar animaciones angulares en función de las características que debería ser lo suficientemente bueno 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 una hace un caso convincente para las animaciones angulares, la mayoría de ellas se pueden encontrar en 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 se está animando un elemento, y uno los usa así:

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

    Intentar hacer lo mismo sin Angular requeriría una animación CSS en 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. los void estado (documentación) Vamos a 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 el final y solo después de eso eliminar el elemento del DOM, todo con JS.

  3. Cálculo automático de propiedades  '*' (documentación): 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ía que JS verificara la altura actual de un elemento, asignando la altura exacta a él 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 el real la altura del elemento se usa para la transición, no como con la prevalencia max-height solución.

  4. Demostraciones de animación (documentación) - esto es algo que no era exactamente posible con animaciones CSS (si no quizás emulado con setTimeout) y es útil, por ej. para la depuración

  5. A diferencia de lo indicado en la pregunta, en realidad es posible usar campos de instancia como params en animaciones angulares, ver esta pregunta. Me resulta mucho más fácil de usar que manipular las variables de CSS a través de DOM API como se muestra aquí en MDN.

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


5
2018-04-07 07:33