Angular Academy · Lektion

Animationsgrunder: trigger och state

Definiera animationstillstånd och triggers.

Lektion 1 av 413 steg

Animationsgrunder: trigger och state är en gratis lektion i Angular Academy på CoddyKit. Detta är lektion 1 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för Angular Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Angular Academy innehåller totalt 4 lektioner.

Angular-animationer

Angulars animationssystem är ett deklarativt DSL som bygger på Web Animations API. Du beskriver tillstånd och övergångar, så hanterar Angular tidsinställningar och DOM-uppdateringar.

Konfiguration

Ange animationer i din bootstrap-konfiguration för att aktivera animationsmotorn.

bootstrapApplication(AppComponent, {
  providers: [provideAnimationsAsync()]
});

trigger

En trigger namnger en animation och grupperar dess tillstånd och övergångar. Du kopplar den till ett element via en binding.

animations: [
  trigger('openClose', [
    // states and transitions
  ])
]

Definiera tillstånd

state kopplar ett namngivet tillstånd till en uppsättning CSS-format som elementet ska ha i det tillståndet.

state('open', style({ height: '200px', opacity: 1 })),
state('closed', style({ height: '0px', opacity: 0 }))

Funktionen style

style tar emot ett objekt med CSS-egenskaper. Använd camelCase-nycklar eller CSS-namn inom citattecken.

style({ backgroundColor: '#1976d2', transform: 'scale(1)' })

Koppla triggern

I templaten binder du @triggerName till ett uttryck som returnerar det aktuella tillståndet.

<div [@openClose]="isOpen ? 'open' : 'closed'">
  Content
</div>

En komplett trigger

Här är en trigger med två tillstånd och en övergång mellan dem.

trigger('openClose', [
  state('open', style({ height: '200px' })),
  state('closed', style({ height: '0px' })),
  transition('open <=> closed', animate('300ms ease'))
])

Styra tillstånd från komponenten

Komponenten växlar bara en boolean eller sträng; Angular interpolerar mellan formaten för de matchande tillstånden.

isOpen = signal(true);
toggle() { this.isOpen.update(v => !v); }

Wildcard-tillstånd

Wildcard-tecknet * matchar alla tillstånd och är användbart för standardvärden samt enter-/leave-animationer som behandlas senare.

state('*', style({ opacity: 1 }))

Void-tillstånd

Det särskilda tillståndet void representerar ett element som inte finns i DOM, vilket ligger till grund för enter- och leave-animationer.

Varför deklarativa animationer?

Deklarativa animationer håller tidslogiken utanför komponenterna, integreras med Angulars livscykel och städar automatiskt upp när element lämnar DOM.

Snabbtest

Testa dina kunskaper om animationer.

Besvara frågan i den interaktiva lektionen

Sammanfattning

Du har lärt dig att Angular-animationer använder en trigger som innehåller state-definitioner (där varje definition kopplar ett namn till style) och binds i templaten via [@trigger]. Tillstånden void och * täcker frånvarande respektive valfria tillstånd.

Gratis att börja

Lär dig HTML med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 38
Lektioner: 144

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Animationsgrunder: trigger och state” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Angular Academy, inklusive ”Animationsgrunder: trigger och state”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i Angular Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Animationsgrunder: trigger och state”?

Definiera animationstillstånd och triggers. Ni övar på Angular Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig Angular Academy?

Du behöver inga förkunskaper. Utbildningen i Angular Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 1 av 4.

Hur lång tid tar lektionen ”Animationsgrunder: trigger och state”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här Angular Academy-lektionen?

Ja. Varje Angular Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

← Tillbaka till Angular Academy