# Transitions in Vue 3: CSS animation without a library

Transition and TransitionGroup add and remove CSS classes as a node enters, leaves or moves: six lines of CSS cover a modal or a list.

> Page: https://ui.eneawork.it/blog/vue-3-transition-animazioni
> Markdown: https://ui.eneawork.it/blog/vue-3-transition-animazioni.md

*2026-11-01*

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.

Misurato il 1 novembre 2026: il catalogo conta 111.985 componenti, 1.556 blocchi e 12.808 icone da 1.472 librerie, letti da /api/stats. Su 1.514 profili di libreria 10 riguardano Vue, 8 dei quali dichiarano licenza MIT: le classi di transizione sono stabili dall’API di Vue 3 e non richiedono dipendenze. Metodo: lettura di data/library_profiles.json e della risposta di /api/stats con uno script Node, sul repository EneUI.

## 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

## Errori comuni

## 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.

## FAQ

### 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.