Transizioni e temporizzazione
Animare il passaggio tra gli stati con le transizioni
Transizioni e temporizzazione è una lezione Angular Academy gratuita su CoddyKit. Questa è la lezione 2 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.
Animare tra gli stati
Gli stati descrivono dove si trova l'elemento a riposo; le transizioni descrivono come si sposta tra uno stato e l'altro. La funzione transition associa un cambiamento di stato a un'animazione.
La funzione transition
transition accetta un'espressione di cambiamento di stato e uno o più passaggi di animazione.
transition('closed => open', animate('300ms'))Operatori di direzione
Usate => per una sola direzione e <=> per entrambe le direzioni.
transition('open <=> closed', animate('250ms ease-in-out'))La funzione animate
animate definisce la temporizzazione: durata, ritardo opzionale ed easing. Il formato della stringa è "duration delay easing".
animate('500ms 100ms ease-out')Unità di durata
Le durate accettano ms o s. Un numero senza unità viene interpretato come millisecondi.
animate('0.4s')
animate('400ms')
animate(400)Funzioni di easing
L'easing controlla l'accelerazione: linear, ease, ease-in, ease-out, ease-in-out oppure una funzione cubic-bezier().
animate('300ms cubic-bezier(0.25, 0.8, 0.25, 1)')Stili inline di destinazione
animate può accettare un secondo argomento style per animare verso stili non associati a uno stato denominato.
transition('* => active', [
animate('300ms', style({ transform: 'scale(1.1)' }))
])Più passaggi
Passate un array di passaggi per eseguire una sequenza all'interno di un'unica transizione.
transition('closed => open', [
style({ opacity: 0 }),
animate('300ms', style({ opacity: 1 }))
])Transizioni wildcard
Usate * per associare transizioni da o verso qualsiasi stato, utile per effetti di entrata generici.
transition('* => open', animate('200ms'))Stili iniziali
Un style() senza argomenti prima di animate() imposta il punto di partenza, quindi Angular anima verso gli stili dello stato di destinazione.
transition(':enter', [
style({ opacity: 0 }),
animate('400ms', style({ opacity: 1 }))
])Buone pratiche per la temporizzazione
Mantenete brevi le transizioni dell'interfaccia (150-300 ms) per garantire reattività. Riservate durate maggiori ai movimenti ampi e intenzionali. Scegliete l'easing in base all'effetto desiderato.
Verifica rapida
Verificate la vostra comprensione delle transizioni e della temporizzazione.
Riepilogo
Avete imparato che transition collega i cambiamenti di stato (con => o <=>) ai passaggi animate. La stringa di temporizzazione è duration delay easing e potete concatenare passaggi style/animate per creare sequenze.
Impara HTML con un tutor IA — gratis
Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.
- Corsi
- 38
- Lezioni
- 144
Domande Frequenti
La lezione «Transizioni e temporizzazione» è gratuita?
Sì — il testo completo di «Transizioni e temporizzazione» è 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 «Transizioni e temporizzazione»?
Animare il passaggio tra gli stati con le transizioni 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 2 di 4.
Quanto tempo richiede la lezione «Transizioni e temporizzazione»?
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