TransitionGroup pour les animations de listes
Animation des listes v-for, transitions de déplacement, animations décalées avec délai.
TransitionGroup pour les animations de listes est une leçon Vue Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Vue Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Vue Academy comprend 4 leçons au total.
Animer des listes
<Transition> gère un seul élément. Pour les listes générées avec v-for, utilisez <TransitionGroup>, qui anime les éléments lorsqu’ils sont ajoutés, supprimés ou réordonnés.
La prop tag
Contrairement à Transition, TransitionGroup peut générer un véritable élément conteneur. Transmettez tag="ul" (ou n’importe quelle balise) pour qu’il produise cet élément autour des éléments de la liste.
<TransitionGroup name="list" tag="ul">
<li v-for="item in items" :key="item.id">
{{ item.text }}
</li>
</TransitionGroup>Chaque élément doit avoir une key
Une :key unique pour chaque élément est obligatoire. Vue l’utilise pour suivre les éléments qui se déplacent, entrent ou sortent. N’utilisez jamais l’index du tableau comme key pour des listes animées.
<li v-for="item in items" :key="item.id">{{ item.text }}</li>Classes d’entrée et de sortie
TransitionGroup utilise les mêmes classes d’entrée et de sortie que Transition. Définissez-les pour contrôler l’apparition et la suppression de chaque élément.
.list-enter-from,
.list-leave-to {
opacity: 0;
transform: translateX(30px);
}
.list-enter-active,
.list-leave-active {
transition: all 0.3s ease;
}La classe spéciale move
La fonctionnalité la plus remarquable est la classe -move (par exemple list-move). Lorsque les éléments sont réordonnés, Vue anime doucement chacun d’eux vers sa nouvelle position au moyen d’une transition de transformation.
.list-move {
transition: transform 0.4s ease;
}La technique FLIP
Derrière -move se trouve FLIP : First, enregistrer l’ancienne position ; Last, lire la nouvelle position ; Invert, appliquer une transformation pour donner l’impression que l’élément n’a pas bougé ; puis Play, supprimer la transformation. Vue effectue automatiquement ces étapes.
/* Vue computes: translate(oldX - newX) then animates to 0 */Les éléments sortants nécessitent un positionnement absolu
Un élément en cours de suppression occupe encore de l’espace, ce qui peut perturber l’animation de déplacement de ses voisins. Définissez position: absolute sur la classe leave-active afin de retirer les éléments sortants du flux de mise en page.
.list-leave-active {
position: absolute;
}Exemple de liste triable
Combinez les classes d’entrée, de sortie et de déplacement : Vue anime alors simultanément l’insertion, la suppression et le réarrangement.
function shuffle() {
items.value = items.value
.slice()
.sort(() => Math.random() - 0.5);
}Décaler les éléments avec transitionDelay
Pour faire apparaître les éléments les uns après les autres, liez une transition-delay en ligne fondée sur l’index de l’élément. Chaque élément attend un peu plus longtemps que le précédent.
<li
v-for="(item, i) in items"
:key="item.id"
:style="{ transitionDelay: i * 50 + 'ms' }"
>
{{ item.text }}
</li>Décalage avec des points d’accroche JS
Pour un décalage piloté par les données, vous pouvez également utiliser les points d’accroche JS et un attribut data-index, en retardant chaque onEnter selon l’index de l’élément.
function onEnter(el, done) {
const delay = el.dataset.index * 50;
setTimeout(() => {
el.style.opacity = 1;
done();
}, delay);
}Remarques sur les performances
FLIP anime transform, ce qui convient bien au GPU. Gardez des listes d’une taille raisonnable et préférez transform/opacity aux propriétés qui déclenchent une nouvelle mise en page, comme width ou top, pour obtenir un mouvement fluide à 60 images par seconde.
Vérification rapide
Que permet la classe list-move ?
Récapitulatif
Vous avez appris à utiliser <TransitionGroup> pour les listes : générer un conteneur avec tag, attribuer une :key unique à chaque élément, utiliser les classes d’entrée et de sortie ainsi que la classe -move pour les animations de réorganisation fondées sur FLIP, positionner absolument les éléments sortants et créer des effets de décalage à l’aide de transitionDelay fondé sur l’index.
Questions Fréquemment Posées
La leçon « TransitionGroup pour les animations de listes » est-elle gratuite ?
Oui — le texte complet de « TransitionGroup pour les animations de listes » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Vue Academy, passe à CoddyKit PRO. Le cours Vue Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « TransitionGroup pour les animations de listes » ?
Animation des listes v-for, transitions de déplacement, animations décalées avec délai. Tu pratiques Vue Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Vue Academy ?
Aucune expérience préalable n'est requise. Vue Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.
Combien de temps prend la leçon « TransitionGroup pour les animations de listes » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Vue Academy ?
Oui. Chaque leçon Vue Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Le composant Transition
- Transitions et animations CSS
- Hooks de transition JavaScript
- TransitionGroup pour les animations de listes