La View Transitions API: transizioni fluide di pagina e di stato

La View Transitions API anima il passaggio tra due stati di una pagina — un elenco che diventa una vista di dettaglio, un tema che si commuta, un elemento che viene filtrato — con quasi nessun codice di animazione. Il browser cattura un'istantanea del vecchio stato, una del nuovo e dissolve (o trasforma) tra di esse al posto tuo.

Transizioni nello stesso documento

Per i cambi di stato all'interno di una singola pagina — una single-page app che aggiorna il DOM — avvolgi l'aggiornamento del DOM in document.startViewTransition():

function showDetail(item) {
  if (!document.startViewTransition) {
    updateDOM(item); // no support: just update, no animation
    return;
  }
  document.startViewTransition(() => updateDOM(item));
}

La callback esegue il tuo normale lavoro sul DOM. Il browser cattura un'istantanea "prima" appena prima che venga eseguita e una "dopo" una volta terminata, poi anima tra le due. L'impostazione predefinita è una dissolvenza incrociata morbida — già un bel miglioramento gratuito.

Personalizzare l'animazione con il CSS

Durante una transizione il browser costruisce un albero di pseudo-elementi che puoi stilizzare. L'aggancio più semplice è il gruppo di transizione root:

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.3s;
}

Puoi mirare all'istantanea uscente con ::view-transition-old() e a quella entrante con ::view-transition-new(), poi applicare qualsiasi animazione CSS desideri.

Animare un elemento specifico tra gli stati

Per far sembrare che un elemento si muova e si trasformi tra i due stati — una miniatura che cresce fino a diventare un'immagine intera — dagli uno stesso view-transition-name in entrambi gli stati:

.hero-image {
  view-transition-name: hero;
}

Il nome deve essere univoco sulla pagina in ogni momento. Quando il browser trova lo stesso nome prima e dopo, interpola direttamente posizione e dimensione di quell'elemento invece di dissolverlo, producendo un effetto continuo di "elemento condiviso".

Transizioni tra documenti (MPA)

Anche i siti multipagina possono effettuare transizioni tra navigazioni di pagina complete, senza JavaScript. Attivale da CSS in entrambe le pagine:

@view-transition {
  navigation: auto;
}

Con quella singola regola, le navigazioni della stessa origine si animano automaticamente. Valori view-transition-name corrispondenti su entrambe le pagine permettono a un elemento — diciamo l'immagine hero di un post — di passare dalla pagina elenco alla pagina articolo.

Riferimento rapido

Obiettivo	API
Cambio di stato SPA	document.startViewTransition(cb)
Navigazione MPA	@view-transition { navigation: auto }
Stilizzare la dissolvenza	::view-transition-old/new(root)
Elemento condiviso	view-transition-name (univoco)

Supporto e progressive enhancement

Le transizioni nello stesso documento sono disponibili nei browser Chromium e in Safari; il supporto tra documenti è in fase di rilascio e Firefox sta implementando entrambi. Poiché ti proteggi con if (!document.startViewTransition) e la versione tra documenti è un opt-in puramente CSS, l'API degrada con grazia: i browser non supportati semplicemente aggiornano la pagina senza animazione. Questo la rende sicura da aggiungere oggi come progressive enhancement.

Ricorri alle view transition quando un salto tra stati risulta brusco. Una piccola quantità di movimento dà agli utenti un senso di continuità — da dove vengono le cose e dove sono andate — senza che tu scriva a mano un singolo keyframe nella maggior parte dei casi.