Novità nelle transizioni di visualizzazione (aggiornamento 2025)

Bramus

Data di pubblicazione: 8 ott 2025

Sono cambiate molte cose da quando abbiamo implementato le transizioni di visualizzazione dello stesso documento nel 2023.

Nel 2024 abbiamo rilasciato le transizioni di visualizzazione tra documenti, aggiunto perfezionamenti come view-transition-class e tipi di transizione di visualizzazione e dato il benvenuto a Safari, che ha aggiunto il supporto per le transizioni di visualizzazione.

Questo post fornisce una panoramica delle modifiche apportate alle transizioni di visualizzazione nel 2025.

Migliore supporto di browser e framework

Le transizioni di visualizzazione nello stesso documento diventeranno presto disponibili nella baseline

Un'area di interesse di Interop 2025 è l'API View Transition, in particolare le transizioni di visualizzazione nello stesso documento con document.startViewTransition(updateCallback), view-transition-class, la denominazione automatica con view-transition-name: match-element e il selettore CSS :active-view-transition.

Firefox intende includere queste funzionalità nella prossima release di Firefox 144, che diventerà stabile il 14 ottobre 2025. In questo modo, queste funzionalità saranno disponibili come Baseline Newly available.

Il supporto dell'API View Transition è ora disponibile in React Core

Durante l'anno, il team di React ha lavorato per aggiungere le transizioni di visualizzazione al core di React. Hanno annunciato react@experimentalil supporto ad aprile e questa settimana, alla React Conf, hanno spostato il supporto nella react@canary, il che significa che il design è quasi definitivo.

function Child() {
  return (
    <ViewTransition>
      <div>Hi</div>
    </ViewTransition>
  );
}

function Parent() {
  const [show, setShow] = useState();
  if (show) {
    return <Child />;
  }
  return null;
}

Per tutti i dettagli, puoi consultare la documentazione di React<ViewTransition> o guardare questo intervento di Aurora Scharff per una buona introduzione all'argomento.

Funzionalità rilasciate di recente

Assegnare automaticamente i nomi agli elementi con view-transition-name: match-element

Per contrassegnare un elemento di cui creare uno snapshot nell'ambito di una transizione di visualizzazione, devi assegnargli un view-transition-name. Questo è fondamentale per le transizioni di visualizzazione, in quanto sblocca funzionalità come la transizione tra due elementi diversi. Ogni elemento ha lo stesso valore view-transition-name su ogni lato della transizione e le transizioni di visualizzazione si occupano di tutto.

Tuttavia, assegnare un nome univoco agli elementi può diventare complicato quando si esegue la transizione di molti elementi che non cambiano realmente. Se hai 100 elementi che si spostano in un elenco, devi trovare 100 nomi univoci.

Grazie a match-element non devi fare tutto questo. Quando lo utilizzi come valore per view-transition-name, il browser genera un view-transition-name interno per ogni elemento corrispondente in base all'identità dell'elemento.

Nella seguente demo viene utilizzato questo approccio. Ogni scheda della riga riceve un view-transition-name generato automaticamente.

.card {
  view-transition-name: match-element;
  view-transition-class: card;
}

#targeted-card {
  view-transition-name: targeted-card;
  view-transition-class: none;
}

La carta che entra o esce riceve un nome esplicito. Questo nome viene utilizzato nel CSS per collegare animazioni specifiche allo snapshot. Gli snapshot di tutte le altre schede vengono stilizzati utilizzando il view-transition-class associato.

/* Style all pseudos with the class .card */
::view-transition-group(*.card) {
  animation-timing-function: var(--bounce-easing);
  animation-duration: 0.5s;
}

/* Style only the targeted-card's pseudos */
::view-transition-old(targeted-card):only-child {
  animation: animate-out ease-out 0.5s forwards;
}
::view-transition-new(targeted-card):only-child {
  animation: animate-in ease-in 0.25s forwards;
}

DevTools ora mostra le regole di targeting degli pseudonimi che utilizzano un view-transition-class

Per eseguire il debug delle transizioni di visualizzazione, puoi utilizzare il riquadro Animazioni di DevTools per mettere in pausa tutte le animazioni. In questo modo hai il tempo di esaminare gli pseudo-elementi senza doverti preoccupare che la transizione della visualizzazione raggiunga lo stato finale. Puoi anche scorrere manualmente le sequenze temporali dell'animazione per vedere come si svolgono le transizioni.

In precedenza, durante l'ispezione di uno degli pseudo-elementi ::view-transition-*, Chrome DevTools non esponeva le regole destinate agli pseudo-elementi utilizzando il relativo set view-transition-class. Questa funzionalità è stata aggiunta in Chrome 139.

I gruppi di transizione di visualizzazione nidificati sono disponibili a partire da Chrome 140

Quando viene eseguita una transizione di visualizzazione, gli elementi acquisiti vengono visualizzati in un albero di pseudo-elementi. Per impostazione predefinita, l'albero generato è "piatto". Ciò significa che la gerarchia originale nel DOM viene persa e tutti i gruppi di transizione di visualizzazione acquisiti sono fratelli sotto un unico pseudo-elemento ::view-transition.

Questo approccio ad albero piatto è sufficiente per molti casi d'uso, ma diventa problematico quando vengono utilizzati effetti visivi come il ritaglio o le trasformazioni 3D. Questi richiedono una gerarchia nell'albero.

Grazie a "Gruppi di transizione di visualizzazione nidificati" ora puoi nidificare gli pseudo-elementi ::view-transition-group l'uno nell'altro. Quando i gruppi di transizione della visualizzazione sono nidificati, è possibile ripristinare effetti come il ritaglio durante la transizione.

Scopri come utilizzare i gruppi di transizione delle visualizzazioni

Gli pseudo-elementi ora ereditano più proprietà di animazione

Quando imposti una delle proprietà estese animation-* su uno pseudo elemento ::view-transition-group(…), anche gli elementi ::view-transition-image-pair(…), ::view-transition-old(…) e ::view-transition-new(…) contenuti ereditano la proprietà. Questa funzionalità è utile perché mantiene automaticamente la dissolvenza incrociata tra ::view-transition-new(…) e ::view-transition-old(…) sincronizzata con ::view-transition-group(…).

::view-transition-group(.card) {
  animation-duration: 0.5s;
}

Inizialmente, questa ereditarietà era limitata a animation-duration e animation-fill-mode (e successivamente anche a animation-delay), ma ora è stata estesa per ereditare più proprietà abbreviate di animazione.

I browser che supportano le transizioni di visualizzazione ora dovrebbero avere quanto segue nel foglio di stile dello user agent

:root::view-transition-image-pair(*),
:root::view-transition-old(*),
:root::view-transition-new(*) {
  animation-duration: inherit;
  animation-fill-mode: inherit;
  animation-delay: inherit;
  animation-timing-function: inherit;
  animation-iteration-count: inherit;
  animation-direction: inherit;
  animation-play-state: inherit;
}

Gli pseudo-elementi che ereditano più proprietà sono stati implementati in Chrome 140.

L'esecuzione del callback della promessa finished non attende più un frame

Quando utilizzava la promessa finished per eseguire un callback, Chrome attendeva la produzione di un frame prima di eseguire la logica. Ciò potrebbe causare uno sfarfallio alla fine dell'animazione quando lo script sposta alcuni stili nel tentativo di preservare uno stato visivamente simile.

 document.startViewTransition(() => {
  if (from) {
    dfrom.classList.remove("shadow");
    dto.appendChild(target);
  } else {
    dto.classList.remove("shadow");
    dfrom.appendChild(target);
  }
}).finished.then(() => {
  if (from) {
    dto.classList.add("shadow");
  } else {
    dfrom.classList.add("shadow");
  }
  from = 1 - from;
});

Questa modifica della tempistica risolve la situazione spostando i passaggi di pulizia della transizione di visualizzazione per l'esecuzione asincrona dopo il completamento del ciclo di vita. In questo modo, il frame visivo prodotto alla risoluzione promessa finished mantiene comunque la struttura della transizione di visualizzazione, evitando così lo sfarfallio.

Questa modifica della tempistica è stata implementata in Chrome 140.

Funzionalità in arrivo

L'anno non è ancora finito, quindi c'è ancora tempo per lanciare altre funzionalità.

Le transizioni di visualizzazione con ambito sono pronte per il test in Chrome 140

Le transizioni di visualizzazione con ambito sono un'estensione proposta dell'API View Transition che consente di avviare una transizione di visualizzazione su un sottoalbero del DOM chiamando element.startViewTransition() (anziché document.startViewTransition()) su qualsiasi HTMLElement.

Le transizioni con ambito consentono l'esecuzione simultanea di più transizioni di visualizzazione (purché abbiano radici di transizione diverse). Gli eventi puntatore vengono impediti solo in quell'albero secondario (che puoi riattivare), anziché nell'intero documento. Inoltre, consentono di disegnare gli elementi al di fuori della radice della transizione sopra la transizione di visualizzazione con ambito.

Nella seguente demo, puoi spostare un punto all'interno del contenitore facendo clic su uno dei pulsanti. Puoi farlo con le transizioni di visualizzazione con ambito documento o con ambito elemento, in modo da vedere come si comportano in modo diverso.

La funzionalità è pronta per essere testata a partire da Chrome 140 con il flag "Experimental Web Platform features" (Funzionalità sperimentali della piattaforma web) attivato in chrome://flags. Siamo alla ricerca attiva di feedback degli sviluppatori.

La posizione di ::view-transition cambierà da fixed a absolute in Chrome 142

Lo pseudo ::view-transition è attualmente posizionato utilizzando position: fixed. In seguito a una risoluzione del gruppo di lavoro CSS, questo valore verrà modificato in position: absolute.

Questa modifica del valore position da fixed a absolute, che verrà implementata in Chrome 142, non è osservabile visivamente perché il blocco contenitore dello pseudo-elemento ::view-transition è comunque il blocco contenitore dello snapshot. L'unico effetto osservabile è un valore position diverso quando si esegue un getComputedStyle.

document.activeViewTransition sarà disponibile in Chrome 142

Quando viene avviata una transizione di visualizzazione, viene creata un'istanza ViewTransition. Questo oggetto contiene diverse promesse e funzionalità per monitorare l'avanzamento della transizione, nonché per consentire manipolazioni come l'interruzione della transizione o la modifica dei relativi tipi.

Anziché richiedere di tenere traccia manualmente di questa istanza, Chrome ora fornisce una proprietà document.activeViewTransition che rappresenta questo oggetto. Se non è in corso alcuna transizione, il valore è null.

Per le transizioni di visualizzazione nello stesso documento, il valore viene impostato quando chiami document.startViewTransition. Per le transizioni di visualizzazione tra documenti, puoi accedere a questa istanza di ViewTransition negli eventi pageswap e pagereveal.

Il supporto per document.activeViewTransition verrà implementato in Chrome 142.

Impedisci il completamento automatico di una transizione di visualizzazione con ViewTransition.waitUntil

Una transizione di visualizzazione raggiunge automaticamente lo stato finished al termine di tutte le animazioni. Per evitare questo completamento automatico, a breve potrai utilizzare ViewTranistion.waitUntil. Quando viene passata una promessa, ViewTransition raggiungerà lo stato finished solo quando anche la promessa passata sarà risolta.

const t = document.startViewTransition(…);
t.waitUntil(async () => {
  await fetch(…);
});

Questa modifica verrà implementata entro la fine dell'anno e consentirà, ad esempio, di attendere un fetch o di implementare più facilmente una transizione di visualizzazione basata sullo scorrimento.

Passaggi successivi

Come puoi vedere, non siamo rimasti fermi da quando abbiamo inizialmente rilasciato le transizioni di visualizzazione nel 2023. Non vediamo l'ora di rilasciare le transizioni di visualizzazione con ambito in futuro e, come sempre, siamo aperti ai feedback.

Se hai domande sulle transizioni di visualizzazione, contattaci sui social media. Le richieste di funzionalità per le transizioni di visualizzazione possono essere presentate al CSS WG. Se riscontri un bug, segnalalo in Chromium per comunicarcelo.