Chrome 147 consente transizioni di visualizzazione simultanee e nidificate con transizioni di visualizzazione con ambito elemento

Bramus

Data di pubblicazione: 27 marzo 2026

Chrome 147 introduce le transizioni di visualizzazione con ambito elemento, una funzionalità che consente di avviare una transizione di visualizzazione su un sottoalbero del DOM chiamando Element.startViewTransition().

Questa funzionalità consente di eseguire più transizioni di visualizzazione contemporaneamente, di nidificare le transizioni di visualizzazione in corso e di risolvere i problemi di layering con i contenuti position: fixed, mantenendo interattivo il resto della pagina.

Che cosa è cambiato?

Da quando abbiamo annunciato che la funzionalità è pronta per i test degli sviluppatori in Chrome 140, abbiamo collaborato con la community e il CSS Working Group per finalizzare i dettagli, in particolare per quanto riguarda i comportamenti predefiniti:

• Per impostazione predefinita, le radici dell'ambito partecipano automaticamente.
• Le transizioni di visualizzazione con ambito contengono automaticamente i relativi pseudo-elementi nidificati utilizzando i gruppi di transizione di visualizzazione nidificati.
• Lo pseudo-elemento ::view-transition-group-children() in una transizione di visualizzazione mirata ritaglia automaticamente i suoi contenuti se la radice dell'ambito ritaglia il suo overflow.
• Le transizioni di visualizzazione con ambito elemento applicano automaticamente contain: layout e view-transition-scope: all alla radice dell'ambito durante la transizione.

Dopo questi aggiornamenti, le transizioni di visualizzazione con ambito elemento sono disponibili nella versione stabile di Chrome a partire dalla versione 147.

Demo

Elenco di riproduzione casuale

Questa demo ti consente di riordinare gli elementi di ogni elenco. Puoi anche scambiare le posizioni degli elenchi selezionando il pulsante al centro.

Poiché vengono utilizzate le transizioni di visualizzazione con ambito elemento, entrambe le liste possono eseguire contemporaneamente le transizioni di visualizzazione casuale. Puoi anche avviare la transizione della visualizzazione esterna, che scambia le posizioni degli elenchi, mentre gli elementi dell'elenco vengono ancora riorganizzati.

Il mio viaggio in Patagonia

La demo"Il mio viaggio in Patagonia" mostra le transizioni di visualizzazione con ambito elemento. Questa demo è stata creata in base al video della campagna "Web UX, re-imagined".

Utilizza i menu a discesa per filtrare gli elementi della griglia. Utilizza il pulsante Aggiungi in ogni elemento della griglia per aggiungerlo all'elenco degli elementi selezionati, che viene visualizzato nella barra laterale.

La demo utilizza le transizioni di visualizzazione con ambito elemento in tre punti:

• La griglia degli elementi quando vengono filtrati.
• Gli elementi della griglia quando vengono aggiunti all'elenco degli elementi selezionati.
• La barra laterale che mostra l'elenco degli elementi selezionati.

Leggi la guida

Per scoprire tutto sulle transizioni di visualizzazione con ambito elemento, leggi la guida. Mostra come implementare le transizioni di visualizzazione con ambito elemento, spiega ulteriori dettagli e include altre demo.

Leggi la guida alle transizioni di visualizzazione con ambito elemento