Nozioni di base sulle animazioni: trigger e state
Definire gli stati e i trigger delle animazioni
Nozioni di base sulle animazioni: trigger e state è una lezione Angular Academy gratuita su CoddyKit. Questa è la lezione 1 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 Angular Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Angular Academy include 4 lezioni in totale.
Animazioni Angular
Il sistema di animazioni di Angular è un DSL dichiarativo basato sulla Web Animations API. Descrivete stati e transizioni e Angular gestisce la temporizzazione e gli aggiornamenti del DOM.
Configurazione
Fornite le animazioni nella configurazione di bootstrap per abilitare il motore delle animazioni.
bootstrapApplication(AppComponent, {
providers: [provideAnimationsAsync()]
});Il trigger
Un trigger dà un nome a un'animazione e raggruppa i relativi stati e transizioni. Lo collegate a un elemento tramite un binding.
animations: [
trigger('openClose', [
// states and transitions
])
]Definire gli stati
state associa uno stato denominato a un insieme di stili CSS che l'elemento deve avere mentre si trova in quello stato.
state('open', style({ height: '200px', opacity: 1 })),
state('closed', style({ height: '0px', opacity: 0 }))La funzione style
style accetta un oggetto di proprietà CSS. Usate chiavi in camelCase o nomi CSS tra virgolette.
style({ backgroundColor: '#1976d2', transform: 'scale(1)' })Associare il trigger
Nel template, associate @triggerName a un'espressione che restituisce lo stato corrente.
<div [@openClose]="isOpen ? 'open' : 'closed'">
Content
</div>Un trigger completo
Ecco un trigger con due stati e una transizione tra loro.
trigger('openClose', [
state('open', style({ height: '200px' })),
state('closed', style({ height: '0px' })),
transition('open <=> closed', animate('300ms ease'))
])Gestire lo stato dal componente
Il componente si limita a modificare un booleano o una stringa; Angular interpola tra gli stili degli stati corrispondenti.
isOpen = signal(true);
toggle() { this.isOpen.update(v => !v); }Stato wildcard
Il carattere jolly * corrisponde a qualsiasi stato ed è utile per i valori predefiniti e per le animazioni di entrata e uscita illustrate più avanti.
state('*', style({ opacity: 1 }))Stato void
Lo stato speciale void rappresenta un elemento che non si trova nel DOM ed è la base delle animazioni di entrata e uscita.
Perché usare animazioni dichiarative?
Le animazioni dichiarative mantengono la logica della temporizzazione fuori dai componenti, si integrano con il ciclo di vita di Angular e ripuliscono automaticamente gli elementi quando escono dal DOM.
Verifica rapida
Verificate la vostra comprensione delle basi delle animazioni.
Riepilogo
Avete imparato che le animazioni Angular usano un trigger contenente definizioni state (ognuna associa un nome a style), collegato nel template tramite [@trigger]. Gli stati void e * coprono rispettivamente l'assenza di uno stato e qualsiasi stato.
Domande Frequenti
La lezione «Nozioni di base sulle animazioni: trigger e state» è gratuita?
Sì — il testo completo di «Nozioni di base sulle animazioni: trigger e state» è 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 Angular Academy, passa a CoddyKit PRO. Il corso Angular Academy include 4 lezioni in totale.
Cosa imparerò in «Nozioni di base sulle animazioni: trigger e state»?
Definire gli stati e i trigger delle animazioni Eserciti Angular 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 Angular Academy?
Non è richiesta alcuna esperienza precedente. Angular 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 1 di 4.
Quanto tempo richiede la lezione «Nozioni di base sulle animazioni: trigger e state»?
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 Angular Academy?
Sì. Ogni lezione Angular 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
- Nozioni di base sulle animazioni: trigger e state
- Transizioni e temporizzazione
- Animazioni di entrata e uscita
- Keyframe e animazioni sfalsate