Pronto per i test degli sviluppatori: transizioni di visualizzazione con ambito

Bramus

Data di pubblicazione: 10 settembre 2025

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

Quick intro

Per avviare una transizione di visualizzazione con ambito, chiama element.startViewTransition() (anziché document.startViewTransition()) su qualsiasi HTMLElement a cui è applicato contain: layout.

document.querySelector('nav').startViewTransition({
  callback: () => {
    // … code that manipulates the contents of <nav>
  },
})

Il risultato è una transizione di visualizzazione limitata al sottoalbero del HTMLElement scelto, con lo pseudo-albero ::view-transition risultante inserito in quel HTMLElement. Il HTMLElement funge da contenitore per le animazioni di transizione.

html
  ├─ head
  └─ body
     ├─ nav
     │  ├─ ::view-transition
     │  │  └─ ::view-transition-group(thing)
     │  │     └─ ::view-transition-image-pair(thing)
     │  │        ├─ ::view-transition-old(thing)
     │  │        └─ ::view-transition-new(thing)
     │  └─ ul
     │     ├─ li
     │     ├─ li
     │     └─ li
     └─ main
        └─ …

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.

Scopri tutto sulle transizioni di visualizzazione con ambito nella spiegazione delle transizioni di visualizzazione con ambito.

Demo

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.

Con le transizioni Visualizzazione con ambito, il punto rimane ritagliato dal contenitore principale durante la transizione. Inoltre, il punto non copre il popup quando viene mostrato.

Feedback richiesto

Ci interessano i feedback della community di sviluppatori web su:

• La forma dell'API Scoped View Transitions.
• Casi d'uso in cui la funzionalità funziona bene o non ha funzionato come previsto.
• Come devono essere risolte le domande sugli ambiti di partecipazione autonoma.

Condividi il tuo feedback commentando il problema n. 9890 del gruppo di lavoro CSS. Prima di inviare un feedback, acquisisci familiarità con i problemi noti e i vincoli.

Se riscontri un bug, segnalalo in Chromium per comunicarcelo.