Mr Josselin A - Angular










Animation > Transitions et déclencheurs

Parcours & Expérience





Références

L'actualité

Librairie

L'information

Transitions et déclencheurs d'animations

Dans ce guide, nous allons plus en détail sur les états de transition spéciaux tels que * (caractère générique) void et montrons comment ces états spéciaux sont utilisés pour les éléments entrant et sortant d'une vue. Le chapitre explore également plusieurs déclencheurs d'animation, rappels d'animation et animations basées sur des séquences à l'aide d'images clés.

États prédéfinis et correspondance générique

Dans Angular, les états de transition peuvent être définis explicitement par le biais de la fonction state(), ou en utilisant le prédéfini * (caractère générique) et les états void.

État générique (Wildcard)

Un astérisque * ou un caractère générique correspond à tout état d'animation. Cela est utile pour définir les transitions qui s'appliquent indépendamment de l'état de début ou de fin de l'élément HTML.

Par exemple, une transition de open => * s'applique lorsque l'état de l'élément passe de ouvert à autre chose.


Voici un autre exemple de code utilisant l'état générique avec notre exemple précédent utilisant les états open et closed. Au lieu de définir chaque paire de transition d'état à état, nous affirmons maintenant que toute transition vers closed prend 1 seconde et que toute transition vers openprend 0,5 seconde.

Cela nous permet d'ajouter de nouveaux états sans avoir à inclure des transitions distinctes pour chacun.

Utilisez une syntaxe à double flèche pour spécifier les transitions d'état à état dans les deux sens.

Utilisation d'un état générique avec plusieurs états de transition

Dans notre exemple de bouton à deux états, le caractère générique n'est pas très utile car il n'y a que deux états possibles, open et closed. Les états génériques sont préférables lorsqu'un élément dans un état particulier a plusieurs états potentiels vers lesquels il peut être modifié. Si notre bouton peut changer de l'un open à l'autre closed ou quelque chose comme inProgress, l'utilisation d'un état générique pourrait réduire la quantité de codage nécessaire.


La * => * transition s'applique lorsqu'un changement entre deux états a lieu.

Les transitions sont appariées dans l'ordre dans lequel elles ont été définies. Ainsi, vous pouvez appliquer d'autres transitions en plus de la transition * => * (indifférente). Par exemple, définissez des modifications de style ou des animations s'appliquant uniquement à open => closed, ou uniquement à closed => open, puis utilisez-les * => * comme solution de secours pour les paires d'états qui ne sont autrement pas appelées.

Pour ce faire, listez les transitions les plus spécifiques avant * => *.

Utiliser des jokers avec des styles

Utilisez le caractère générique * avec un style pour indiquer à l'animation d'utiliser quelle que soit la valeur du style actuel et animez-la. Le caractère générique est une valeur de secours utilisée si l'état en cours d'animation n'est pas déclaré dans le déclencheur.

État vide

Vous pouvez utiliser l'état void pour configurer des transitions pour un élément entrant ou sortant d'une page. Voir Animer entrer et sortir d'une vue.

Combinaison d'états génériques et vides

Vous pouvez combiner des états génériques et des espaces vides dans une transition pour déclencher des animations qui entrent et sortent de la page :

  • Une transition de * => void s'applique lorsque l'élément quitte une vue, quel que soit l'état dans lequel il se trouvait avant de quitter.
  • Une transition de void => * s'applique lorsque l'élément entre dans une vue, quel que soit l'état dans lequel il se positionne.
  • L'état générique * correspond à n'importe quel état, y compris void.

Animer entrer et sortir d'une vue

Cette section explique comment animer des éléments entrant ou sortant d'une page. Un élément entrant ou sortant d'une vue équivaut à être inséré ou supprimé du DOM.

Nous allons maintenant ajouter un nouveau comportement :

  • Lorsque vous ajoutez un héros à la liste des héros, il semble voler sur la page à partir de la gauche.
  • Lorsque vous supprimez un héros de la liste, il semble s'envoler vers la droite.

Dans le code ci-dessus, nous avons appliqué l'état void lorsque l'élément HTML n'est pas attaché à une vue.

Aliases :enter & :leave

:enter et :leave sont des alias pour les transitions void => * et * => void. Ces alias sont utilisés par plusieurs fonctions d'animation.
Il est plus difficile de cibler un élément qui entre dans une vue car il ne figure pas encore dans le DOM. Utilisez donc les alias :enter et :leave ciblez les éléments HTML insérés ou supprimés d'une vue.

Utiliser *ngIf et *ngFor avec :enter & :leave

La transition :enter s'exécute lorsque des *ngIf ou des *ngFor sont placées sur la page, et :leave lorsque ces vues sont supprimées de la page.

Dans cet exemple, nous avons un déclencheur spécial pour l'animation d'entrée et de sortie appelée myInsertRemoveTrigger. Le modèle HTML contient le code suivant.

Dans le fichier de composant, la transition :enter définit une opacité initiale de 0, puis l'anime pour modifier cette opacité en 1 lorsque l'élément est inséré dans la vue.

Notez que cet exemple n'utilise pas state().

:increment & :decrement des transitions

La fonction transition() prend des valeurs de sélecteur supplémentaires, :increment et :decrement. Utilisez-les pour lancer une transition lorsqu'une valeur numérique a augmenté ou diminué.

Valeurs booléennes dans les transitions

Si un déclencheur contient une valeur booléenne en tant que valeur de liaison, cette valeur peut être mise en correspondance à l'aide d'une expression transition() qui compare true et false, ou 1 et 0.

Dans l'extrait de code ci-dessus, le modèle HTML lie un élément ‹div› à un déclencheur nommé openClose avec une expression d'état de isOpen et avec les valeurs possibles de true et false. Ceci est une alternative à la pratique qui consiste à créer deux états nommés open et close.

Dans le code du composant, dans les métadonnées @Componentanimations sous la propriété animations:, lorsque l'état est évalué à true("open" ici), la hauteur de l'élément HTML associé est un style générique ou par défaut. Dans ce cas, utilisez la hauteur que l'élément avait déjà avant le début de l'animation. Lorsque l'élément est "Closed", l'élément s'anime à une hauteur de 0, ce qui le rend invisible.


Plusieurs déclencheurs d'animation

Vous pouvez définir plusieurs déclencheurs d'animation pour un composant. Vous pouvez attacher des déclencheurs d'animation à différents éléments, et les relations parent-enfant entre les éléments affectent le moment et le moment d'exécution des animations.

Animations parent-enfant

Vous pouvez définir plusieurs déclencheurs d'animation pour un composant. Vous pouvez attacher des déclencheurs d'animation à différents éléments, et les relations parent-enfant entre les éléments affectent le moment et le moment d'exécution des animations.

Chaque fois qu'une animation est déclenchée dans Angular, l'animation parent est toujours prioritaire et les animations enfants sont bloquées. Pour qu'une animation enfant puisse s'exécuter, l'animation parent doit interroger chacun des éléments contenant des animations enfant, puis autoriser l'exécution des animations à l'aide de la fonction animateChild().
Désactiver une animation sur un élément HTML

Une liaison de contrôle d'animation spéciale appelée @.disabled peut être placée sur un élément HTML pour désactiver les animations sur cet élément, ainsi que sur les éléments imbriqués. Lorsque la valeur est true, la liaison @.disabled empêche le rendu de toutes les animations.

L'exemple de code ci-dessous montre comment utiliser cette fonctionnalité.

src/app/open-close.component.html

src/app/open-close.component.ts

Lorsque la @.disabledliaison est vraie, le déclencheur @childAnimation ne démarre pas.

Lorsqu'un élément d'un modèle HTML a des animations désactivées à l'aide de la @.disabledliaison hôte, les animations sont également désactivées sur tous les éléments internes. Vous ne pouvez pas désactiver sélectivement plusieurs animations sur un seul élément.

Toutefois, certaines animations enfants peuvent toujours être exécutées sur un parent désactivé de l'une des manières suivantes :

  • Une animation parent peut utiliser cette fonction query() pour collecter des éléments internes situés dans des zones désactivées du modèle HTML. Ces éléments peuvent encore animer.
  • Une sous-animation peut être interrogée par un parent puis animée ultérieurement avec la fonction animateChild().
Désactiver toutes les animations

Pour désactiver toutes les animations d'une application Angular, placez la liaison @.disabled hôte sur le composant Angular le plus élevé.

src/app/app.component.ts

Il est utile de désactiver les animations au niveau de l'application lors des tests de bout en bout (E2E).

Rappels d'animation (callbacks)

La fonction trigger() d'animation émet des rappels quand elle commence et quand elle se termine. Dans l'exemple ci-dessous, nous avons un composant qui contient un déclencheur openClose.

Dans le modèle HTML, l'événement d'animation est renvoyé via $event, en tant @trigger.start que @trigger.done, où trigger est le nom du déclencheur utilisé. Dans notre exemple, le déclencheur openClose apparaît comme suit.

Une utilisation potentielle des rappels d'animation pourrait être de couvrir un appel d'API lent, tel qu'une recherche dans une base de données. Par exemple, vous pouvez configurer le bouton InProgress pour qu'il ait sa propre animation en boucle où il pulsera ou effectuera un autre mouvement visuel pendant la fin de l'opération du système dorsal.

Ensuite, une autre animation peut être appelée à la fin de l'animation en cours. Par exemple, le bouton passe de l'état inProgress à l'état closed au terme duquel l'appel de l'API est terminé.

Une animation peut amener un utilisateur final à percevoir l'opération plus rapidement, même si ce n'est pas le cas. Ainsi, une simple animation peut constituer un moyen économique de satisfaire les utilisateurs plutôt que de chercher à améliorer la vitesse d'un appel de serveur et de compenser des circonstances indépendantes de votre volonté, telles qu'une connexion réseau peu fiable.

Les rappels peuvent servir d'outil de débogage, par exemple, conjointement avec console.warn() pour afficher la progression de l'application dans la console JavaScript du développeur. L'extrait de code suivant crée une sortie du journal de la console pour notre exemple d'origine, un bouton avec les deux états de open et closed.


Images clés

Dans la section précédente, nous avons assisté à une transition simple à deux états. Nous allons maintenant créer une animation avec plusieurs étapes exécutées en séquence à l'aide d'images clés.

La fonction keyframe() Angular est similaire aux images clés en CSS. Les images clés permettent plusieurs changements de style au sein d'un même segment de minutage. Par exemple, notre bouton, au lieu d'être atténué, peut changer de couleur plusieurs fois en une période de 2 secondes.

Le code de ce changement de couleur peut ressembler à ceci.

Décalage

Les images clés comprennent un décalage qui définit le point de l'animation où se produit chaque changement de style. Les décalages sont des mesures relatives allant de zéro à un, marquant le début et la fin de l'animation, respectivement.

La définition des décalages pour les images clés est facultative. Si vous les omettez, des décalages équitables sont automatiquement attribués. Par exemple, trois images clés sans décalages prédéfinis reçoivent des décalages de 0, 0,5 et 1. Spécifier un décalage de 0,8 pour la transition du milieu dans l'exemple ci-dessus pourrait ressembler à ceci.

Le code avec les décalages spécifiés serait comme suit.

Vous pouvez combiner des images clés avec duration, delay et easing au sein d'une seule animation.

Images clés avec une pulsation

Utilisez des images clés pour créer un effet d'impulsion dans vos animations en définissant des styles avec un décalage spécifique tout au long de l'animation.

Voici un exemple d'utilisation d'images clés pour créer un effet d'impulsion :

  • L'original openet les closedétats, avec les modifications d'origine de la hauteur, de la couleur et de l'opacité, se produisant sur une période de 1 seconde
  • Séquence d'images clés insérée au milieu qui fait que le bouton semble émettre des pulsations irrégulières au cours de la même période d'une seconde.

L'extrait de code pour cette animation peut ressembler à ceci.

Propriétés et unités animables

La prise en charge des animations par Angular s'appuyant sur les animations Web, vous pouvez animer n'importe quelle propriété que le navigateur considère comme animable. Cela inclut les positions, les tailles, les transformations, les couleurs, les bordures, etc. Le W3C gère une liste de propriétés pouvant être animées sur sa page de transitions CSS.

Pour les propriétés de position avec une valeur numérique, définissez une unité en fournissant la valeur sous forme de chaîne, entre guillemets, avec le suffixe approprié:

  • 50 pixels: '50px'
  • Taille de police relative: '3em'
  • Pourcentage: '100%'
Si vous ne spécifiez pas une unité lors de la spécification de la dimension, Angular suppose une unité par défaut de pixels, ou px. Exprimer 50 pixels 50est la même chose que dire '50px'.

Calcul automatique des propriétés avec des caractères génériques

Parfois, vous ne connaissez pas la valeur d'une propriété de style dimensionnel jusqu'à l'exécution. Par exemple, les éléments ont souvent des largeurs et des hauteurs qui dépendent de leur contenu et de la taille de l'écran. Ces propriétés sont souvent difficiles à animer en utilisant CSS.

Dans ces cas, vous pouvez utiliser une * valeur de propriété générique spéciale sous style(), de sorte que la valeur de cette propriété de style particulière soit calculée au moment de l'exécution, puis insérée dans l'animation.

Dans cet exemple, nous appelons un déclencheur shrinkOut, utilisé lorsqu'un élément HTML quitte la page. L'animation prend la hauteur que l'élément a avant de partir et s'anime de cette hauteur à zéro.