React

Transition in Vue 3: animazioni CSS senza libreria

Transition e TransitionGroup aggiungono e tolgono classi CSS quando un nodo entra, esce o si sposta: bastano sei righe di CSS per una modale o una lista.

In sintesi

  • Transition non anima nulla da sola: applica classi e lascia il tempo di transizione al CSS.
  • Enter e leave hanno tre fasi: from, active, to. La durata sta solo su active.
  • TransitionGroup richiede :key stabili, altrimenti il riordino animato non parte.

In Vue 3 animi un nodo senza installare nulla: <Transition> aggiunge e rimuove classi CSS quando l’elemento entra o esce, e il browser fa il resto. Il componente non contiene keyframe.

Le classi che Vue aggiunge


import { ref } from "vue";

const open = ref(false);



  Toggle

  
    Saved.
  



.fade-enter-active,
.fade-leave-active {
  transition: opacity 180ms ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

Con name="fade" le classi diventano fade-enter-from, fade-enter-active e fade-enter-to, più le tre equivalenti per l’uscita. La durata va solo sulla classe active: è quella che resta applicata per tutta la transizione.

Liste: TransitionGroup


import { ref } from "vue";

const items = ref([
  { id: 1, name: "Ada" },
  { id: 2, name: "Linus" },
]);



  
    {{ item.name }}
  



.list-move,
.list-enter-active,
.list-leave-active {
  transition: all 220ms ease;
}

.list-leave-active {
  position: absolute;
}

La classe list-move è quella che anima il riordino: Vue la applica agli elementi che cambiano posizione. Senza :key stabile il gruppo non riconosce i nodi e il movimento non parte.

Quando basta il CSS e quando no

CasoVincePerché
Comparsa di una modaleTransitionDue classi e un’opacità
Riordino di una listaTransitionGroupLa classe move gestisce lo spostamento
Timeline con più passiLibreria o GSAPIl CSS non orchestra sequenze con stato
Animazione al cambio di rottaView TransitionsIl browser conserva lo stato della pagina

Errori comuni

  • Scrivere la durata su enter-from: viene rimossa al frame successivo e l’animazione salta.
  • Animare height: auto: il browser non interpola un valore automatico, serve una misura esplicita o grid-template-rows.
  • Dimenticare appear: al primo render non c’è transizione, e la modale appare di colpo.
  • Usare TransitionGroup senza tag: il wrapper di default è uno span e rompe il layout della lista.

Il limite da mettere in conto

Le transizioni CSS non rispettano da sole la preferenza di sistema per il movimento ridotto. Avvolgi il blocco in @media (prefers-reduced-motion: reduce) e azzera la durata: chi ha chiesto meno animazioni riceve un cambio immediato, senza perdere il contenuto.

Dove continuare

Nel catalogo: vue3-gsap-animations, vue-bits e shadcn-vue; le sezioni animate sono in /blocks. Le guide: animazioni con Tailwind e View Transitions. Il confronto: transizioni in React.

Domande frequenti

Serve una libreria per animare in Vue 3?

No. Transition e TransitionGroup con CSS coprono entrata, uscita e riordino. Una libreria serve per timeline complesse o animazioni con stato.

Perché l’animazione non parte?

Spesso il selettore non usa il nome della transition. Con name uguale a fade le classi sono fade-enter-active e fade-leave-active.

Transition funziona con v-if?

Sì, è il caso principale. Funziona anche con v-show e con i componenti dinamici, non con il semplice cambio di testo.

Come rispetto prefers-reduced-motion?

Avvolgi il blocco CSS in una media query che annulla la durata: chi ha chiesto meno movimento riceve un cambio immediato.

Perché il layout scatta a fine animazione?

Stai animando un elemento che occupa spazio nel flusso. Anima transform e opacity, oppure togli il nodo dal flusso durante l’uscita.