Keyframes en trapsgewijze animaties
Maak complexe animaties met trapsgewijze effecten
Keyframes en trapsgewijze animaties is een gratis Angular 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 Angular Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Angular Academy bevat in totaal 4 lessen.
Animaties in meerdere stappen
Eenvoudige overgangen gaan van A naar B. Voor beweging in meerdere stappen, zoals stuiteren, pulseren en een kleurverloop, biedt Angular keyframes. Voor het achter elkaar animeren van meerdere items biedt het stagger.
De functie keyframes
keyframes neemt een array met style-stappen. Elke stap heeft een offset van 0 tot 1 die de positie binnen de duur aangeeft.
animate('1s', keyframes([
style({ opacity: 0, offset: 0 }),
style({ opacity: 0.5, offset: 0.3 }),
style({ opacity: 1, offset: 1 })
]))Offset begrijpen
offset is het aandeel van de totale duur. 0 is het begin en 1 het einde. De offsets moeten in de array oplopen.
Een stuitereffect
Met keyframes kun je voorbij het eindpunt bewegen en vervolgens tot rust komen voor een stuitereffect.
keyframes([
style({ transform: 'translateY(0)', offset: 0 }),
style({ transform: 'translateY(-20px)', offset: 0.5 }),
style({ transform: 'translateY(0)', offset: 1 })
])Offsets weglaten
Als je offset weglaat, verdeelt Angular de keyframes gelijkmatig over de duur.
keyframes([
style({ opacity: 0 }),
style({ opacity: 1 })
])De functie query
Gebruik query binnen een overgang om kinderen van een host te selecteren en te animeren.
transition('* => *', [
query(':enter', [
style({ opacity: 0 })
])
])De functie stagger
stagger voegt een tijdsverschil toe tussen de animatie van elk geselecteerd element, waardoor een trapsgewijs effect ontstaat.
query(':enter', [
style({ opacity: 0 }),
stagger(100, [
animate('300ms', style({ opacity: 1 }))
])
])Een lijst trapsgewijs animeren
Combineer query + stagger in een trigger op de lijstcontainer, zodat items na elkaar vervagen.
trigger('listAnim', [
transition('* => *', [
query(':enter', [
style({ opacity: 0 }),
stagger(80, animate('250ms', style({ opacity: 1 })))
], { optional: true })
])
])De optionele vlag
Geef { optional: true } door aan query, zodat de animatie geen fout geeft wanneer er geen overeenkomende elementen zijn.
Negatieve stagger
Een negatieve waarde in stagger keert de volgorde om, zodat de laatste items eerst worden geanimeerd. Dat is handig voor trapsgewijze uitgangen.
stagger(-50, animate('200ms', style({ opacity: 0 })))Opmerking over prestaties
Het trapsgewijs animeren van veel elementen kan zwaar zijn. Houd de duur per item kort en geef de voorkeur aan transform/opacity, zodat de animaties op de GPU blijven.
Korte controle
Test je begrip van keyframes en trapsgewijs animeren.
Samenvatting
Je hebt geleerd dat keyframes beweging in meerdere stappen definieert met offset-waarden, terwijl query + stagger meerdere elementen trapsgewijs animeren. Gebruik { optional: true } voor extra veiligheid en geef de voorkeur aan GPU-vriendelijke eigenschappen.
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
- 38
- Lessen
- 144
Veelgestelde vragen
Is de les “Keyframes en trapsgewijze animaties” gratis?
Ja — je kunt hier op het web alle 3 lessen van het leerpad Angular Academy, waaronder “Keyframes en trapsgewijze animaties”, 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 Angular Academy bevat in totaal 4 lessen.
Wat leer ik in “Keyframes en trapsgewijze animaties”?
Maak complexe animaties met trapsgewijze effecten Je oefent met Angular 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 Angular Academy te beginnen?
Ervaring vooraf is niet nodig. Angular 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 “Keyframes en trapsgewijze animaties”?
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 Angular Academy?
Ja. Elke les over Angular 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
- Basisprincipes van animaties: trigger en state
- Transities en timing
- Animaties bij binnenkomen en verlaten
- Keyframes en trapsgewijze animaties