Nelle parole della skill
Una guida per animare le transizioni tra stati dell'interfaccia utente con la View Transition API di React: dichiarare il cosa con il componente ViewTransition, attivare il quando con startTransition, useDeferredValue o Suspense, e controllare il come con classi CSS. Copre cinque pattern in un ordine di priorità fisso — trasformazioni di elementi condivisi, identità delle liste, cambio di stato e cambio di rotta — più la navigazione direzionale basata sul tipo tramite addTransitionType e l'integrazione con l'App Router di Next.js.
Spiega dove deve trovarsi un confine ViewTransition, quando è richiesto default="none", quali browser lo supportano (Chromium 125+, Firefox 144+, Safari 18.2+) con degradazione graduale altrove, e indica i file di riferimento per l'ordine di implementazione, le ricette CSS, i pattern e la risoluzione dei problemi.
Che cosa produce
- Un componente wrapper direzionale riutilizzabile che contiene le mappe di ingresso e uscita basate sul tipo per applicazioni multipagina.
- Morph di elementi condivisi creati riutilizzando lo stesso nome nelle view in fase di unmount e mount, ad esempio una miniatura che diventa un'immagine hero.
- Regole CSS associate agli pseudo-elementi di view transition, incluso la coppia di immagini che contiene entrambi gli snapshot.
- Un'implementazione che degrada in modo controllato, in cui i browser non supportati saltano l'animazione invece di interrompere la navigazione.
Come funziona
- 01Capire Cosa Esprime l'Animazione
Aggiungi un boundary solo quando riesci ad articolare la relazione spaziale o la continuità che esprime. Se non riesci a dire cosa comunica, non aggiungerlo.
- 02Racchiudi lo Stato in un Boundary
React assegna un view-transition-name univoco e chiama internamente document.startViewTransition, quindi non chiami mai tu stesso startViewTransition.
- 03Attivala con una Transition
Enter, exit, update e share si attivano solo da startTransition, useDeferredValue o Suspense. Un semplice setState non animerà nulla.
- 04Stile degli Snapshot in CSS
Gli snapshot in uscita e in entrata vengono targettizzati tramite pseudo-elementi di view transition con i tuoi nomi di classe, mentre il file delle recipes fornisce animazioni già pronte.
- 05Etichettala con Transition Types
addTransitionType accumula i tipi di contesto in modo che boundary diversi nell'albero reagiscano in modo diverso, e un oggetto per tipo mappa questi tipi su classi CSS in fase di enter, exit e share.