Quel est le but des animations angulaires ?

Question

Je me demande depuis un certain temps maintenant, pourquoi devrais-je utiliser Angulaire des animations les animations CSS. Je vois quelques domaines que l'on pourrait considérer avant de les utiliser:

---

Performance

Dans la première étape, j'ai trouvé cette question qui ne traite que de performace côté des choses. L'on a accepté la réponse n'est pas satisfaisante pour moi, car il indique que l'on devrait utiliser les animations CSS dans la mesure du possible, de sorte que les optimisations comme la course les animations dans le thread séparé peut s'appliquer. Cela ne semble pas être vrai, car Angulaire de la documentation unis

Angulaire des animations sont construites sur le dessus de la norme Animations Web de l'API et de l'exécuter en mode natif sur les navigateurs qui le supportent.

(l'emphase est mienne)

Et quand nous regardons les Animations Web API Projet de nous voir que les mêmes optimisations peuvent s'appliquer à Web des Animations CSS spécifié dans les fiches.

Alors qu'il est possible d'utiliser ECMAScript pour effectuer une animation à l'aide requestAnimationFrame [HTML], ces animations se comporter différemment des déclaratif d'animation en termes de la façon dont ils sont représentés dans la cascade CSS et les optimisations de performances qui sont possibles telles que l'exécution de l'animation sur un thread séparé. En utilisant le Web des Animations de l'interface de programmation, il est possible de créer des animations à partir d'un script qui ont le même comportement et les caractéristiques de performance que le déclaratif des animations.

(c'est moi qui souligne encore une fois)

En dehors de certains navigateurs comme IE ne prennent pas en charge les Animations Web, est-il une raison pour utiliser les déclarations CSS sur Angulaire des animations ou vice-versa? Je les vois comme échangeables performace-sage.

---

Plus de contrôle sur les animations

Cela peut paraître comme un argument pour Angulaires des animations, parce que vous pouvez mettre en pause l'animation ou de l'utilisation de JS variables avec elle, etc., mais la même chose est vraie en utilisant, par exemple. CSS animation-play-state: pause ou à l'aide de CSS variables spécifiées dans JS, voir la documentation.

Maintenant, je peux voir, il pourrait être gênant pour définir le CSS variables dans le code JS, mais la même chose est vraie pour tout en utilisant Angulaire des animations. Ce sont généralement déclaré en @Component animations domaine et n'ont pas, sauf via l'animation des données d'état lié à la propriété, l'accès aux champs d'instance (si vous ne créez pas votre animation par AnimationBuilder bien sûr, qui d'ailleur n'est également pas très pratique ou belle).

Autre point est que, avec les Animations Web API, il est possible d' inspecter, de débogage ou de tester les animations, mais je ne vois pas comment cela est possible Angulaire des animations. Si elle l'est, pourriez-vous me montrer comment faire? Si elle n'est pas, vraiment, je ne vois pas l'avantage de l'utilisation Angulaire des animations en CSS pour des raisons de contrôle de soit.

---

Nettoyeur de code

J'ai lu par exemple ici un paragraphe indiquant que la séparation entre les animations de "normal" styles est en fait la séparation du comportement et de la présentation. Est vraiment déclarant des animations dans des feuilles de styles mélange de ces responsabilités? J'ai vu que toujours dans l'autre sens, surtout en regardant les règles CSS dans l' @Component animations m'a donné un sentiment d'avoir CSS déclarations sur l'un de trop nombreux endroits.

---

Alors, comment est-il Angulaire des animations?

• Est-ce juste une commodité utilitaire pour extraire les animations à l'écart du reste de l'styles, ou faut-il apporter quelque chose de digne de la fonctionnalité-sage?
• Ne un usage Angulaire animations payer seulement dans des cas particuliers, ou est-il une convention une équipe choisit d'aller tout le chemin avec elle?

J'aimerais ici sur les avantages tangibles de l'aide Angulaire des animations. Les gars merci d'avance!

Answer 1

J'ai donc fait quelques recherches et, bien que je n'ai pas trouver n'importe quel argument pour, ni contre Angulaire des animations de performance (comme déjà indiqué dans la question ci-dessus), il y a de très bons arguments à utiliser Angulaire animations fonctionnalité-sage , qui devrait être assez bon pour les puristes qui veulent avoir CSS uniquement dans les feuilles, au moins dans certains cas, je vais illustrer ci-dessous.

Permettez-moi d'énumérer quelques fonctionnalités utiles à partir de laquelle chaque seul fait de façon convaincante Angulaire des animations, de la majorité d'entre eux peuvent être trouvés dans Angulaire des animations de la documentation:

1. La Transition des styles - ces styles sont appliqués uniquement au cours de la transition d'un état à un autre - seulement alors qu'un élément est en cours d'animation, et on les utilise comme ceci:

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

   Essaie de faire la même sans Angulaire aurait besoin d'un CSS animation dans 'stateB" styles avec la même durée que la transition ou à l'affectation temporaire de styles pour le moment et de les retirer après l'animation de la durée via JS.

2. L' void état (documentation) - vous permet d'animer les éléments ajoutés ou retirés de la DOM.

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

   Ce qui est très cool parce qu'auparavant, bien qu'il était assez facile pour animer l'ajout, la suppression a été plus compliqué et nécessaire pour déclencher l'animation, attendez jusqu'à sa fin, et seulement après que supprimer l'élément du DOM, tous avec JS.

3. Automatique de calcul des propriétés de la '*' (documentation) - Permet d'effectuer traditionnellement difficile animations comme la hauteur des transitions pour les éléments dynamiques de la hauteur. Ce problème était particulièrement dérange CSS pour les puristes et nécessaire JS pour vérifier la hauteur d'un élément, d'attribuer le précise heightto et d'autres procédures afin de réaliser une parfaite animation. Mais maintenant, avec Angulaires c'est aussi simple que cela:

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

   Et l'animation est fluide, car la réelle hauteur de l'élément est utilisé pour la transition, pas comme avec les courants max-height de la solution.

4. Animation des rappels (documentation) - c'est quelque chose qui n'était pas possible avec les animations CSS (si ce n'est peut-être émulé avec setTimeout) et est à portée de main, par exemple. pour le débogage.

5. Contrairement a déclaré dans la question, il est effectivement possible d'utiliser des champs d'instance comme params Angulaire des animations, voir à cette question. Je trouve ça beaucoup plus facile à utiliser que la manipulation de CSS variables à travers des API DOM, comme indiqué ici sur MDN.

Il est clair, que si vous avez besoin d'une des caractéristiques énumérées ci-dessus, Angulaire est le chemin à parcourir. Aussi quand il y a de nombreuses animations à gérer dans un composant, et ce n'est que mon avis personnel, je trouve plus facile d'organiser des animations de l'angle moyen de les avoir dans les feuilles, où il est plus difficile de trop en voir les relations entre les différents élément unis.