Keyframes og forskydning
Opret komplekse animationer med forskudt start.
Keyframes og forskydning er en gratis Angular Academy-lektion på CoddyKit. Dette er lektion 4 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i Angular Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Angular Academy-kurset indeholder 4 lektioner i alt.
Animationer i flere trin
Enkle overgange går fra A til B. Til bevægelse i flere trin, f.eks. hop, pulsering og farveforløb, tilbyder Angular keyframes, og til at animere mange elementer i rækkefølge tilbyder den stagger.
Funktionen keyframes
keyframes tager et array af style-trin, som hver har en offset fra 0 til 1, der angiver deres position i varigheden.
animate('1s', keyframes([
style({ opacity: 0, offset: 0 }),
style({ opacity: 0.5, offset: 0.3 }),
style({ opacity: 1, offset: 1 })
]))Forståelse af offset
offset er brøkdelen af den samlede varighed. 0 er begyndelsen, og 1 er slutningen. Værdierne for offset bør stige gennem arrayet.
En hoppeeffekt
Med keyframes kan du gå for langt og derefter falde til ro for at skabe en hoppeeffekt.
keyframes([
style({ transform: 'translateY(0)', offset: 0 }),
style({ transform: 'translateY(-20px)', offset: 0.5 }),
style({ transform: 'translateY(0)', offset: 1 })
])Udeladelse af offset
Hvis du udelader offset, fordeler Angular keyframes jævnt over varigheden.
keyframes([
style({ opacity: 0 }),
style({ opacity: 1 })
])Funktionen query
Hvis du vil animere underordnede elementer i et værtelement, skal du bruge query til at vælge dem i en overgang.
transition('* => *', [
query(':enter', [
style({ opacity: 0 })
])
])Funktionen stagger
stagger tilføjer en tidsforskydning mellem animationen af hvert valgt element, så der skabes en kaskadeeffekt.
query(':enter', [
style({ opacity: 0 }),
stagger(100, [
animate('300ms', style({ opacity: 1 }))
])
])Forskudt animation af en liste
Kombiner query og stagger i en trigger på listens container, så elementerne toner frem ét efter ét.
trigger('listAnim', [
transition('* => *', [
query(':enter', [
style({ opacity: 0 }),
stagger(80, animate('250ms', style({ opacity: 1 })))
], { optional: true })
])
])Det valgfri flag
Overfør { optional: true } til query, så animationen ikke giver en fejl, når der ikke findes matchende elementer.
Negativ stagger
En negativ værdi i stagger vender rækkefølgen om, så de sidste elementer animeres først. Det er nyttigt ved kaskader, når elementer fjernes.
stagger(-50, animate('200ms', style({ opacity: 0 })))Bemærkning om ydeevne
Det kan være krævende at forskyde animationen af mange elementer. Hold varigheden pr. element kort, og foretræk transform/opacity, så animationerne kan køre på GPU'en.
Hurtigt tjek
Test din forståelse af keyframes og forskudte animationer.
Opsummering
Du har lært, at keyframes definerer bevægelse i flere trin ved hjælp af værdier for offset, mens query og stagger animerer mange elementer i en kaskade. Brug { optional: true } for at gøre løsningen robust, og foretræk egenskaber, der egner sig til GPU'en.
Lær HTML med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 38
- Lektioner
- 144
Ofte stillede spørgsmål
Er lektionen “Keyframes og forskydning” gratis?
Ja — alle 3 lektioner i læringssporet Angular Academy, inklusive “Keyframes og forskydning”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Angular Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Keyframes og forskydning”?
Opret komplekse animationer med forskudt start. Du øver dig i Angular Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på Angular Academy?
Der kræves ingen tidligere erfaring. Angular Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 4 af 4.
Hvor lang tid tager lektionen “Keyframes og forskydning”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne Angular Academy-lektion?
Ja. Alle Angular Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- Grundlæggende animation: trigger og state
- Overgange og timing
- Animationer ved indtræden og udtræden
- Keyframes og forskydning