HTML
uniques.
Angular
vous permet également d'animer des séquences coordonnées, telles qu'une grille entière ou une liste d'éléments lorsqu'elles entrent et sortent d'une page.
Vous pouvez choisir d'exécuter plusieurs animations en parallèle ou d'exécuter des animations discrètes de manière séquentielle, les unes après les autres.query()
trouve un ou plusieurs éléments HTML internes.stagger()
applique un délai en cascade aux animations pour plusieurs éléments.group()
exécute plusieurs étapes d'animation en parallèle.sequence()
exécute les étapes d'animation les unes après les autres.query()
vous permet de rechercher des éléments internes dans l'élément en cours d'animation.
Cette fonction cible des éléments HTML
spécifiques dans un composant parent et applique des animations à chaque élément individuellement.
Angular
gère intelligemment la configuration, le démontage et le nettoyage, car il coordonne les éléments sur la page.stagger()
vous permet de définir un intervalle de temps entre chaque élément animé qui est interrogé
et d'animer ainsi les éléments avec un délai entre eux.Filtre/Stagger
de l'exemple en direct affiche une liste de héros avec une séquence d'introduction.
Toute la liste des héros s'installe, avec un léger retard de haut en bas.query()
et stagger()
fonctionner sur l'entrée d'un élément animé.query()
pour rechercher tout élément entrant ou sortant de la page.
La requête spécifie des éléments répondant à certains critères de classe CSS
.
style()
pour définir le même style initial pour l'élément.
Rendez-le invisible et utilisez-le transformpour le déplacer afin qu'il puisse glisser en place.
stagger()
pour retarder chaque animation de 30 millisecondes.
CSS
du même élément mais utiliser une easingfonction différente pour chacune d'elles.
Pour cela, vous pouvez utiliser la fonction group()
d'animation.group()
est utilisée pour regrouper les étapes d'animation plutôt que les éléments animés.:enter
et :leave
autorisez deux configurations de minutage différentes.
Ils sont appliqués au même élément en parallèle, mais s'exécutent indépendamment.group()
pour exécuter plusieurs animations en même temps, simultanément.sequence()
vous permet d'exécuter les mêmes animations l'une après l'autre.
Dans sequence()
, les étapes d'animation sont constituées d'appels de fonction style()
ou animate()
.style()
pour appliquer immédiatement les données de style fournies.animate()
permet d'appliquer des données de style sur un intervalle de temps donné.Filtre/Stagger
, entrez du texte dans la zone de texte Rechercher des héros, tel que Magnetou tornado.HTML
contient un déclencheur appelé filterAnimation
.HTML
à animer existent déjà dans le DOM
.