0Pricing
Vue Academy · Lezione

Il componente Transition

v-enter-from, v-enter-active, v-enter-to, classi v-leave-*, prop name per classi personalizzate

Il componente Transition è una lezione Vue 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 Vue Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Vue Academy include 4 lezioni in totale.

Cosa fa il componente Transition

Vue include il componente <Transition>, che applica animazioni di entrata e uscita a un elemento o componente singolo quando viene inserito o rimosso tramite v-if o v-show.

Non esegue il rendering di alcun elemento DOM aggiuntivo: gestisce solo le classi CSS e la temporizzazione del proprio elemento figlio.

<Transition>
  <p v-if="show">Hello Vue</p>
</Transition>

Solo un elemento

<Transition> richiede esattamente un elemento figlio diretto. Racchiudere più elementi adiacenti non funziona: per le liste utilizzi invece <TransitionGroup>.

L'elemento figlio deve essere attivato o disattivato con v-if, v-show o un componente dinamico.

<!-- valid: one child -->
<Transition>
  <div v-if="open" class="panel">Content</div>
</Transition>

Le sei classi di Transition

Durante un'entrata o un'uscita, Vue aggiunge e rimuove automaticamente sei classi in sequenza.

  • v-enter-from / v-leave-from - stato iniziale
  • v-enter-active / v-leave-active - fase attiva (inserisca qui la transizione)
  • v-enter-to / v-leave-to - stato finale
/* default prefix is "v-" */
.v-enter-active,
.v-leave-active {
  transition: opacity 0.3s ease;
}

Assegnare un nome alla transizione

Assegni alla transizione una prop name per cambiare il prefisso delle classi da v- al nome scelto. Con name="fade" le classi diventano fade-enter-from, fade-enter-active e così via.

<Transition name="fade">
  <p v-if="show">Fades in and out</p>
</Transition>

Un esempio completo di dissolvenza

La dissolvenza classica anima opacity. L'elemento inizia completamente trasparente, la classe attiva dichiara la transizione e la classe to lo porta all'opacità completa.

.fade-enter-from {
  opacity: 0;
}
.fade-enter-active {
  transition: opacity 0.3s ease;
}
.fade-enter-to {
  opacity: 1;
}

La sequenza di entrata passo per passo

Quando l'elemento viene inserito:

  1. fade-enter-from e fade-enter-active vengono aggiunte prima del rendering (opacità 0).
  2. Nel fotogramma successivo fade-enter-from viene rimossa e viene aggiunta fade-enter-to, così l'opacità viene animata verso 1.
  3. Al termine della transizione, vengono rimosse sia la classe active sia la classe to.
/* frame 1: opacity 0 (enter-from + enter-active) */
/* frame 2: opacity 1 (enter-to + enter-active) */

La sequenza di uscita

L'uscita segue lo stesso schema dell'entrata, usando le classi leave. Spesso può riutilizzare la stessa regola active in entrambe le direzioni.

.fade-leave-from {
  opacity: 1;
}
.fade-leave-active {
  transition: opacity 0.3s ease;
}
.fade-leave-to {
  opacity: 0;
}

Confronto tra v-if e v-show

Entrambi attivano le transizioni. v-if monta e smonta effettivamente l'elemento, mentre v-show lo mantiene nel DOM e alterna display. Con v-show, Vue gestisce la modifica di display attorno alla fase active, così l'animazione rimane visibile.

<Transition name="fade">
  <p v-show="visible">Toggled with display</p>
</Transition>

appear al rendering iniziale

Per impostazione predefinita, la transizione non viene eseguita al primo rendering. Aggiunga la prop appear per riprodurre l'animazione di entrata quando il componente viene montato per la prima volta.

<Transition name="fade" appear>
  <p>Animates in on page load</p>
</Transition>

Transizione tra due elementi

Utilizzi v-if / v-else all'interno di un unico componente Transition per alternare due elementi. Assegni a ciascuno una key univoca se hanno lo stesso tag, così Vue li considera distinti.

<Transition name="fade" mode="out-in">
  <button v-if="loading" key="load">Loading...</button>
  <button v-else key="done">Done</button>
</Transition>

Movimento ridotto e accessibilità

Rispetti gli utenti che preferiscono ridurre il movimento. Disabiliti o accorci le transizioni con la media query prefers-reduced-motion, così le animazioni non causano disagio.

@media (prefers-reduced-motion: reduce) {
  .fade-enter-active,
  .fade-leave-active {
    transition: none;
  }
}

Verifica rapida

Che cosa definisce fade-enter-from?

Riepilogo

Ha appreso a usare il componente integrato <Transition>: racchiude un elemento attivato da v-if/v-show, applica sei classi CSS (enter-from, enter-active, enter-to e gli equivalenti leave), supporta un prefisso name, appear per il primo rendering e mode per le sostituzioni.

Domande Frequenti

La lezione «Il componente Transition» è gratuita?

Sì — il testo completo di «Il componente Transition» è 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 «Il componente Transition»?

v-enter-from, v-enter-active, v-enter-to, classi v-leave-*, prop name per classi personalizzate 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 1 di 4.

Quanto tempo richiede la lezione «Il componente Transition»?

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

  1. Il componente Transition
  2. Transizioni e animazioni CSS
  3. Hook di transizione JavaScript
  4. TransitionGroup per le animazioni delle liste
← Torna a Vue Academy