web-dev-qa-db-fra.com

Quel est le but des animations Angular?

Je me demande depuis un certain temps maintenant pourquoi devrais-je utiliser Angular par rapport aux animations CSS . Je vois quelques zones on pourrait considérer avant de les utiliser:

Performance

Dans la première étape, j'ai trouvé ceci question qui ne traite que du côté performance des choses. La réponse acceptée n'est pas satisfaisante pour moi car elle indique que il faut utiliser des animations CSS dans la mesure du possible afin que des optimisations comme l'exécution des animations dans un thread séparé puissent s'appliquer. Cela ne semble pas être vrai, car documentation angulaire déclare

Les animations angulaires sont construites au-dessus de l'API Web Animations standard et exécutées nativement sur les navigateurs qui la prennent en charge.

(c'est moi qui souligne)

Et quand nous regardons Brouillon de l'API Web Animations nous voyons que les mêmes optimisations peuvent s'appliquer aux Animations Web qu'aux CSS spécifiées dans les feuilles.

Bien qu'il soit possible d'utiliser ECMAScript pour effectuer une animation à l'aide de requestAnimationFrame [HTML], de telles animations se comportent différemment de l'animation déclarative en termes de la façon dont elles sont représentées 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 l'interface de programmation des animations Web , il est possible de créer des animations à partir de script qui ont le même comportement et les mêmes performances que les animations déclaratives .

(je souligne encore une fois)

Mis à part certains navigateurs comme IE ne prend pas en charge les animations Web, existe-t-il une raison d'utiliser les déclarations CSS sur Angular = animations ou vice versa? Je les vois comme des performances échangeables.

Plus de contrôle sur les animations

Cela pourrait ressembler à un argument pour Angular, car vous pouvez mettre l'animation en pause ou utiliser des variables JS avec elle, etc., mais il en va de même lorsque vous utilisez par exemple CSS. animation-play-state: pause ou en utilisant les variables CSS spécifiées dans JS, voir documentation .

Maintenant, je peux voir qu'il peut être gênant de définir les variables CSS dans le code JS, mais il en va de même lors de l'utilisation des animations Angular. Elles sont généralement déclarées dans @Componentanimations champ et n'ont pas, sauf via la propriété liée aux données d'état d'animation, accès aux champs d'instance (si vous ne créez pas votre animation via AnimationBuilder bien sûr, qui btw n'est pas non plus très pratique ni beau non plus).

Autre point, avec l'API Web Animations, il est possible de inspecter, déboguer ou tester les animations, mais je ne vois pas comment cela est possible avec les animations Angular. Si c'est le cas, pourriez-vous me montrer comment? Sinon, je ne vois vraiment aucun avantage à utiliser Angular par rapport aux animations CSS) par souci de contrôle non plus .

Code plus propre

J'ai lu par exemple ici un paragraphe déclarant que la séparation des animations des styles "normaux" est en fait une séparation du comportement et de la présentation. La déclaration d'animations dans les feuilles de styles mélange-t-elle vraiment ces responsabilités? J'ai toujours vu cela dans l'autre sens, en particulier en regardant les règles CSS dans le @Component les animations m'ont donné l'impression d'avoir des déclarations CSS sur un trop grand nombre d'endroits.

Alors, comment est-ce avec les animations Angular?

  • Est-ce juste un utilitaire pratique pour extraire des animations du reste des styles, ou apporte-t-il quelque chose de valable en termes de fonctionnalités?
  • Est-ce qu'une utilisation de Angular ne sont payantes que dans des cas spéciaux ou est-ce une convention qu'une équipe choisit d'aller jusqu'au bout?)

J'adorerais ici les avantages tangibles de l'utilisation des animations Angular. Merci les gars dès le départ!

javascriptcssangularanimationangular-animations
44
Dan Macák

J'ai donc fait quelques recherches et bien que je n'ai trouvé aucun argument pour ou contre Angular en termes de performances (comme déjà indiqué dans la question ci-dessus), il y a de très bons arguments à utiliser Angular par fonctionnalité qui devraient être assez bonnes pour les puristes qui veulent avoir du CSS uniquement dans les feuilles, au moins dans certains les cas que je vais illustrer ci-dessous.

Permettez-moi d'énumérer quelques fonctionnalités utiles à partir desquelles chacune fournit un argument convaincant pour Angular, la plupart d'entre elles peuvent être trouvées dans documentation sur les animations angulaires :

  1. Styles de transition - ces styles ne sont appliqués que lors de la transition d'un état à un autre - uniquement lors de l'animation d'un élément, et on les utilise comme ceci:

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

    Essayer de faire la même chose sans Angular nécessiterait une animation CSS dans les styles 'stateB' avec la même durée que la transition ou assigner des styles temporaires pour le moment et les supprimer après la durée de l'animation via JS .

  2. L'état void ( documentation ) - Animons les éléments être ajouté ou supprimé du DOM. 

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

    C'est très cool car auparavant, bien qu'il ait été assez facile d'animer l'ajout, la suppression était plus compliquée et nécessaire pour déclencher l'animation, attendre sa fin et seulement après cela supprimer l'élément du DOM, le tout avec JS.

  3. Calcul automatique des propriétés '*' ( documentation ) - Permet d'effectuer des animations traditionnellement difficiles comme transitions de hauteur pour les éléments à hauteur dynamique . Ce problème était particulièrement gênant pour les puristes CSS et nécessitait que JS vérifie la hauteur actuelle d'un élément, en lui affectant la hauteur précise et d'autres procédures afin d'effectuer une animation parfaite. Mais maintenant avec Angular c'est aussi simple que ça:

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

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

  4. Rappels d'animation ( documentation ) - c'est quelque chose qui n'était pas exactement possible avec les animations CSS (sinon peut-être émulé avec setTimeout) et est pratique par exemple. pour le débogage.

  5. Contrairement à ce qui est indiqué dans la question, , il est en fait possible d'utiliser des champs d'instance comme paramètres dans Angular , voir - cette question . Je trouve qu'il est beaucoup plus facile à utiliser que de manipuler des variables CSS via l'API DOM comme indiqué ici sur MDN .

Il est clair que si vous avez besoin de l'une des fonctionnalités répertoriées ci-dessus, Angular est le chemin à parcourir. Aussi, quand il y a beaucoup d'animations à gérer dans un composant, et ce n'est que mon opinion personnelle, Je trouve plus facile d'organiser des animations de la manière Angular que de les avoir dans des feuilles, où il est également plus difficile de voir les relations entre les différents états des éléments.

37
Dan Macák