TransitionGroup voor lijstanimaties
v-for-lijsten animeren, move-transitions, trapsgewijze animaties met delay.
TransitionGroup voor lijstanimaties is een gratis Vue Academy-les op CoddyKit. Dit is les 4 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Vue Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Vue Academy bevat in totaal 4 lessen.
Lijsten animeren
<Transition> verwerkt één element. Gebruik voor lijsten die met v-for worden weergegeven <TransitionGroup>. Hiermee animeer je items wanneer ze worden toegevoegd, verwijderd of opnieuw gerangschikt.
De eigenschap tag
In tegenstelling tot Transition kan TransitionGroup een echt omhullingselement weergeven. Geef tag="ul" (of een andere tag) door; dan wordt dat element rondom de lijstitems weergegeven.
<TransitionGroup name="list" tag="ul">
<li v-for="item in items" :key="item.id">
{{ item.text }}
</li>
</TransitionGroup>Elk item heeft een key nodig
Een unieke :key op elk item is verplicht. Vue gebruikt deze om bij te houden welke items zijn verplaatst, binnengekomen of vertrokken. Gebruik nooit de array-index als key voor geanimeerde lijsten.
<li v-for="item in items" :key="item.id">{{ item.text }}</li>Enter- en leave-klassen
TransitionGroup gebruikt dezelfde enter- en leave-klassen als Transition. Definieer deze voor het verschijnen en verwijderen van afzonderlijke items.
.list-enter-from,
.list-leave-to {
opacity: 0;
transform: translateX(30px);
}
.list-enter-active,
.list-leave-active {
transition: all 0.3s ease;
}De speciale klasse move
De opvallendste functie is de klasse -move, bijvoorbeeld list-move. Wanneer items opnieuw worden gerangschikt, animeert Vue elk item vloeiend naar zijn nieuwe positie met een overgang op basis van transform.
.list-move {
transition: transform 0.4s ease;
}De FLIP-techniek
Achter -move zit FLIP. Leg eerst de oude positie vast, lees daarna de nieuwe positie uit, keer de beweging om met een transform zodat het item niet verplaatst lijkt en speel de animatie af door de transform te verwijderen. Vue doet dit automatisch.
/* Vue computes: translate(oldX - newX) then animates to 0 */Vertrekkende items hebben absolute positionering nodig
Een element dat wordt verwijderd, neemt nog steeds ruimte in. Daardoor kan de verplaatsingsanimatie van aangrenzende items mislukken. Stel position: absolute in op de klasse leave-active, zodat vertrekkende items uit de lay-outstroom worden gehaald.
.list-leave-active {
position: absolute;
}Een voorbeeld van een sorteerbare lijst
Combineer enter-, leave- en move-klassen; dan animeert Vue het invoegen, verwijderen en herschikken tegelijk.
function shuffle() {
items.value = items.value
.slice()
.sort(() => Math.random() - 0.5);
}Items trapsgewijs laten verschijnen met transitionDelay
Als je items één voor één wilt laten verschijnen, koppel je een inline transition-delay aan de index van het item. Elk item wacht iets langer dan het vorige.
<li
v-for="(item, i) in items"
:key="item.id"
:style="{ transitionDelay: i * 50 + 'ms' }"
>
{{ item.text }}
</li>Trapsgewijs animeren met JavaScript-hooks
Voor een datagestuurde trapsgewijze animatie kun je ook JavaScript-hooks en een kenmerk data-index gebruiken. Vertraag elke onEnter op basis van de index van het element.
function onEnter(el, done) {
const delay = el.dataset.index * 50;
setTimeout(() => {
el.style.opacity = 1;
done();
}, delay);
}Opmerkingen over prestaties
FLIP animeert transform, wat geschikt is voor de GPU. Houd lijsten redelijk klein en geef voor vloeiende animaties met 60 fps de voorkeur aan transform en opacity boven eigenschappen die de lay-out opnieuw berekenen, zoals width of top.
Korte controle
Wat maakt de klasse list-move mogelijk?
Samenvatting
Je hebt <TransitionGroup> voor lijsten geleerd: geef met tag een omhulling weer, geef elk item een unieke :key, gebruik enter- en leave-klassen plus de klasse -move voor op FLIP gebaseerde animaties bij het herschikken, positioneer vertrekkende items absoluut en maak trapsgewijze effecten met een op de index gebaseerde transitionDelay.
Leer HTML met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 42
- Lessen
- 156
Veelgestelde vragen
Is de les “TransitionGroup voor lijstanimaties” gratis?
Ja — je kunt hier op het web alle 3 lessen van het leerpad Vue Academy, waaronder “TransitionGroup voor lijstanimaties”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus Vue Academy bevat in totaal 4 lessen.
Wat leer ik in “TransitionGroup voor lijstanimaties”?
v-for-lijsten animeren, move-transitions, trapsgewijze animaties met delay. Je oefent met Vue Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met Vue Academy te beginnen?
Ervaring vooraf is niet nodig. Vue Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 4 van 4.
Hoe lang duurt de les “TransitionGroup voor lijstanimaties”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over Vue Academy?
Ja. Elke les over Vue Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- De Transition-component
- CSS-transitions en -animaties
- JavaScript-transitionhooks
- TransitionGroup voor lijstanimaties