Transizioni e animazioni CSS
Proprietà transition in CSS, animazioni keyframe, utilizzo di Animate.css con Vue Transition
Transizioni e animazioni CSS è una lezione Vue 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 Vue Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Vue Academy include 4 lezioni in totale.
Due modi per animare in CSS
CSS offre due strumenti che si abbinano perfettamente alle transizioni Vue: la proprietà transition (interpolazione tra due stati) e @keyframes con animation (sequenze temporali a più fasi). Vue può gestire entrambi.
La sintassi abbreviata transition
La sintassi abbreviata transition combina proprietà, durata, funzione di temporizzazione e ritardo in un'unica riga. L'ordine è: proprietà, durata, easing, ritardo.
.box {
/* property duration easing delay */
transition: transform 0.4s ease-in-out 0s;
}Animare più proprietà
Separi più transizioni con le virgole. Può animare insieme transform e opacity per ottenere un effetto di scorrimento e dissolvenza.
.slide-enter-active,
.slide-leave-active {
transition:
transform 0.3s ease,
opacity 0.3s ease;
}
.slide-enter-from {
transform: translateX(20px);
opacity: 0;
}Quando transition non basta
transition anima solo il passaggio tra due stati. Per movimenti rimbalzanti, pulsanti o a più fasi servono i @keyframes, che consentono di definire numerosi punti intermedi.
Definire i keyframe
@keyframes assegna un nome a una sequenza di stati usando percentuali (oppure from/to). Ogni punto descrive gli stili da applicare in quella posizione della sequenza temporale.
@keyframes bounce-in {
0% { transform: scale(0); }
60% { transform: scale(1.1); }
100% { transform: scale(1); }
}La proprietà animation
Applichi un insieme di keyframe con la sintassi abbreviata animation: nome, durata, funzione di temporizzazione, ritardo, iteration-count, direction.
.bounce-enter-active {
animation: bounce-in 0.5s ease both;
}Collegare i keyframe a Transition
Inserisca animation nella classe enter-active per riprodurla durante l'inserimento. Per l'uscita, esegua gli stessi keyframe al contrario.
.bounce-leave-active {
animation: bounce-in 0.5s ease reverse both;
}Usare Animate.css
Animate.css è una libreria di animazioni keyframe già pronte. Anziché scrivere classi personalizzate, indichi a Vue di usare direttamente le classi di Animate.css tramite le prop custom-class.
<!-- after importing animate.css -->
<!-- classes like animate__fadeIn are predefined -->enter-active-class e leave-active-class
<Transition> accetta prop per sostituire i nomi delle classi generate. enter-active-class e leave-active-class consentono di collegare qualsiasi classe esterna, una soluzione perfetta per Animate.css.
<Transition
enter-active-class="animate__animated animate__fadeIn"
leave-active-class="animate__animated animate__fadeOut"
>
<div v-if="show">Animated by Animate.css</div>
</Transition>Impostare esplicitamente la durata
Quando la temporizzazione CSS è ambigua, ad esempio con animation e transition insieme, imposti la prop duration così Vue sa esattamente quando rimuovere le classi. Accetta un numero oppure un oggetto con enter/leave.
<Transition :duration="{ enter: 500, leave: 300 }">
<div v-if="show">Precise timing</div>
</Transition>Le funzioni di easing sono importanti
La funzione di temporizzazione determina la sensazione del movimento. ease-out dà una sensazione di reattività all'entrata, ease-in all'uscita, mentre cubic-bezier() offre il pieno controllo.
.pop-enter-active {
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}Verifica rapida
Quale prop consente di applicare una classe Animate.css durante l'entrata?
Riepilogo
Ha confrontato la scorciatoia transition (interpolazione tra due stati) con @keyframes più animation (sequenze temporali con più passaggi) e ha imparato a integrare Animate.css tramite le prop enter-active-class e leave-active-class, usando duration per definire con precisione i tempi.
Domande Frequenti
La lezione «Transizioni e animazioni CSS» è gratuita?
Sì — il testo completo di «Transizioni e animazioni CSS» è 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 Vue Academy, passa a CoddyKit PRO. Il corso Vue Academy include 4 lezioni in totale.
Cosa imparerò in «Transizioni e animazioni CSS»?
Proprietà transition in CSS, animazioni keyframe, utilizzo di Animate.css con Vue Transition Eserciti Vue 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 Vue Academy?
Non è richiesta alcuna esperienza precedente. Vue 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 animazioni CSS»?
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 Vue Academy?
Sì. Ogni lezione Vue 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
- Il componente Transition
- Transizioni e animazioni CSS
- Hook di transizione JavaScript
- TransitionGroup per le animazioni delle liste