TransitionGroup per le animazioni delle liste
Animazione delle liste v-for, transizioni di movimento, animazioni sfalsate con delay
TransitionGroup per le animazioni delle liste è una lezione Vue Academy gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Vue Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Vue Academy include 4 lezioni in totale.
Animare le liste
<Transition> gestisce un singolo elemento. Per le liste generate con v-for, utilizzi <TransitionGroup>, che anima gli elementi quando vengono aggiunti, rimossi o riordinati.
La prop tag
A differenza di Transition, TransitionGroup può generare un vero elemento contenitore. Passi tag="ul" (o qualsiasi altro tag) e verrà prodotto quell'elemento intorno agli elementi della lista.
<TransitionGroup name="list" tag="ul">
<li v-for="item in items" :key="item.id">
{{ item.text }}
</li>
</TransitionGroup>Ogni elemento richiede una key
È obbligatorio assegnare una :key univoca a ogni elemento. Vue la utilizza per tenere traccia degli elementi che si spostano, entrano o escono. Non utilizzi mai l'indice dell'array come key per le liste animate.
<li v-for="item in items" :key="item.id">{{ item.text }}</li>Classi per l'entrata e l'uscita
TransitionGroup utilizza le stesse classi di entrata e uscita di Transition. Le definisca per controllare l'aspetto e la rimozione dei singoli elementi.
.list-enter-from,
.list-leave-to {
opacity: 0;
transform: translateX(30px);
}
.list-enter-active,
.list-leave-active {
transition: all 0.3s ease;
}La classe speciale -move
La caratteristica più importante è la classe -move, ad esempio list-move. Quando gli elementi vengono riordinati, Vue anima con fluidità ciascuno di essi fino alla nuova posizione usando una transizione basata su transform.
.list-move {
transition: transform 0.4s ease;
}La tecnica FLIP
Alla base di -move c'è FLIP: si registra innanzitutto la posizione precedente (First), poi si legge quella nuova (Last), si applica un'inversione con transform per far sembrare l'elemento immobile (Invert) e infine si rimuove il transform per avviare l'animazione (Play). Vue esegue tutto automaticamente.
/* Vue computes: translate(oldX - newX) then animates to 0 */Gli elementi in uscita richiedono il posizionamento assoluto
Un elemento in fase di rimozione occupa ancora spazio, cosa che può compromettere l'animazione di spostamento degli elementi vicini. Imposti position: absolute sulla classe leave-active, così gli elementi in uscita vengono rimossi dal flusso del layout.
.list-leave-active {
position: absolute;
}Un esempio di lista ordinabile
Combinando le classi di entrata, uscita e spostamento, Vue anima contemporaneamente l'inserimento, la rimozione e il riordinamento degli elementi.
function shuffle() {
items.value = items.value
.slice()
.sort(() => Math.random() - 0.5);
}Scaglionare con transitionDelay
Per fare apparire gli elementi uno dopo l'altro, associ una transition-delay inline basata sull'indice dell'elemento. Ogni elemento attende un po' più a lungo del precedente.
<li
v-for="(item, i) in items"
:key="item.id"
:style="{ transitionDelay: i * 50 + 'ms' }"
>
{{ item.text }}
</li>Scaglionamento con gli hook JavaScript
Per uno scaglionamento basato sui dati può anche utilizzare gli hook JavaScript e un attributo data-index, ritardando ogni onEnter in base all'indice dell'elemento.
function onEnter(el, done) {
const delay = el.dataset.index * 50;
setTimeout(() => {
el.style.opacity = 1;
done();
}, delay);
}Note sulle prestazioni
FLIP anima transform, una proprietà adatta all'accelerazione tramite GPU. Mantenga le liste di dimensioni ragionevoli e preferisca transform e opacity alle proprietà che attivano il ricalcolo del layout, come width o top, per ottenere un'animazione fluida a 60 fps.
Verifica rapida
Che cosa abilita la classe list-move?
Riepilogo
Ha imparato a usare <TransitionGroup> per le liste: generi un contenitore con tag, assegni una :key univoca a ogni elemento, utilizzi le classi di entrata e uscita insieme alla classe -move per le animazioni di riordinamento basate su FLIP, posizioni assolutamente gli elementi in uscita e crei effetti di scaglionamento con transitionDelay basato sull'indice.
Impara HTML con un tutor IA — gratis
Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.
- Corsi
- 42
- Lezioni
- 156
Domande Frequenti
La lezione «TransitionGroup per le animazioni delle liste» è gratuita?
Sì — il testo completo di «TransitionGroup per le animazioni delle liste» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Vue Academy, passa a CoddyKit PRO. Il corso Vue Academy include 4 lezioni in totale.
Cosa imparerò in «TransitionGroup per le animazioni delle liste»?
Animazione delle liste v-for, transizioni di movimento, animazioni sfalsate con delay Eserciti Vue Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Vue Academy?
Non è richiesta alcuna esperienza precedente. Vue Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.
Quanto tempo richiede la lezione «TransitionGroup per le animazioni delle liste»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Vue Academy?
Sì. Ogni lezione Vue Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Il componente Transition
- Transizioni e animazioni CSS
- Hook di transizione JavaScript
- TransitionGroup per le animazioni delle liste