Transizioni e animazioni delle route
RouterView con Transition, transition-name basato sulla route, effetto slide/fade tra le route.
Transizioni e animazioni delle route è 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.
Animare il passaggio tra le route
Quando cambia l'URL, il componente corrispondente viene sostituito istantaneamente. Avvolgendo la vista nella Transition di Vue, può creare una dissolvenza o uno scorrimento tra le pagine, per un'esperienza più fluida.
RouterView con v-slot
Per animare il passaggio, deve accedere al componente risolto. La variante con scoped slot di RouterView espone Component e route.
<RouterView v-slot="{ Component }">
<component :is="Component" />
</RouterView>Avvolgere con Transition
Inserisca una Transition attorno al component dinamico. Vue applica le classi di entrata e uscita quando il componente della route viene montato e smontato.
<RouterView v-slot="{ Component }">
<Transition name="fade" mode="out-in">
<component :is="Component" />
</Transition>
</RouterView>Perché mode out-in?
Senza mode, la pagina precedente e quella nuova vengono animate contemporaneamente e si sovrappongono. mode="out-in" attende che la pagina precedente esca prima di far entrare quella nuova.
Definire il CSS
Il name diventa il prefisso delle classi CSS. Definisca le transizioni di entrata e uscita per ottenere una dissolvenza.
<style>
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.3s ease;
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
}
</style>Transizione per route tramite meta
Memorizzi un nome di transizione nei meta della route, così route diverse possono essere animate in modo diverso: uno scorrimento per una sezione e una dissolvenza per un'altra.
{ path: '/about', component: About, meta: { transition: 'slide' } }Calcolare il nome della transizione
Legga route.meta.transition dallo slot e lo associ al nome di Transition, usando un valore predefinito come alternativa.
<RouterView v-slot="{ Component, route }">
<Transition :name="route.meta.transition || 'fade'" mode="out-in">
<component :is="Component" />
</Transition>
</RouterView>Scorrimenti direzionali
Può scegliere dinamicamente la transizione in base alla direzione della navigazione, ad esempio facendo scorrere a sinistra quando si avanza e a destra quando si torna indietro, confrontando la profondità delle route in una guardia.
Entrata e uscita con scorrimento
Uno scorrimento combina opacity e transform. Faccia entrare la pagina da destra e uscire quella precedente verso sinistra.
<style>
.slide-enter-active,
.slide-leave-active {
transition: all 0.3s ease;
}
.slide-enter-from { transform: translateX(30px); opacity: 0; }
.slide-leave-to { transform: translateX(-30px); opacity: 0; }
</style>Usare key per i cambi di parametro
Se due route condividono lo stesso componente, come /user/1 e /user/2, Vue lo riutilizza e salta la transizione. Aggiunga una :key al percorso della route per forzare un nuovo rendering e l'animazione.
<component :is="Component" :key="route.path" />Rispettare la riduzione del movimento
Per l'accessibilità, disabiliti le animazioni quando l'utente preferisce un movimento ridotto, usando una media query CSS.
<style>
@media (prefers-reduced-motion: reduce) {
.fade-enter-active, .fade-leave-active { transition: none; }
}
</style>Verifica rapida
Verifichi la Sua conoscenza delle transizioni tra route.
Riepilogo
Ha imparato ad animare le route:
- Usi RouterView con v-slot per ottenere Component e route.
- Avvolga component :is con Transition e usi mode="out-in".
- Definisca il CSS di entrata e uscita in base al nome della transizione.
- Legga route.meta.transition per le animazioni specifiche delle route; aggiunga :key per i componenti condivisi.
Domande Frequenti
La lezione «Transizioni e animazioni delle route» è gratuita?
Sì — il testo completo di «Transizioni e animazioni delle route» è 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 delle route»?
RouterView con Transition, transition-name basato sulla route, effetto slide/fade tra le route. 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 delle route»?
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
- Campi meta delle route e tipizzazione
- Transizioni e animazioni delle route
- Configurazione del comportamento di scorrimento
- Navigazione programmatica e useRouter