Gepubliceerd: 10 sep. 2025
Scoped view transitions is een voorgestelde uitbreiding van de View Transition API waarmee u een weergaveovergang kunt starten op een substructuur van de DOM. De functie is klaar om te testen vanuit Chrome 140 met de vlag 'Experimental Web Platform features' ingeschakeld in chrome://flags . We zijn actief op zoek naar feedback van ontwikkelaars.
Snelle introductie
Om een overgang met een scoped view te starten, roept u element.startViewTransition() aan (in plaats van document.startViewTransition() ) op elk HTMLElement waarop contain: layout is toegepast.
document.querySelector('nav').startViewTransition({
callback: () => {
// … code that manipulates the contents of <nav>
},
})
Het resultaat is een weergaveovergang die is afgestemd op de subboom van het gekozen HTMLElement , waarbij de resulterende pseudoboom ::view-transition in dat HTMLElement wordt geïnjecteerd. Het HTMLElement fungeert als container voor de overgangsanimaties.
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
└─ …
Met scoped transitions kunnen meerdere weergaveovergangen tegelijkertijd worden uitgevoerd (zolang ze verschillende overgangsroots hebben). Pointergebeurtenissen worden alleen op die substructuur ( die u opnieuw kunt inschakelen ) voorkomen, in plaats van op het hele document. Bovendien kunnen elementen buiten de overgangsroot over de scoped view-overgang worden getekend.
Leer alles over overgangen in een beperkte weergave in de uitleg over overgangen in een beperkte weergave .
Demonstratie
In de volgende demo kun je een punt binnen de container verplaatsen door op een van de knoppen te klikken. Dit kan met document- of element-overgangen, zodat je kunt zien hoe ze zich anders gedragen.
Live demo
Demo-opname
Bij overgangen met een scoped view blijft de stip tijdens de overgang bijgesneden door de bovenliggende stip. Bovendien wordt de stip niet over de popover getekend wanneer deze wordt weergegeven.
Feedback gewenst
We zijn geïnteresseerd in feedback van de webontwikkelaarscommunity over:
- De vorm van de Scoped View Transitions API.
- Gebruiksvoorbeelden waarbij de functie goed werkt of niet zoals verwacht.
- Hoe de vragen over zelfdeelnemende scopes opgelost moeten worden.
Deel uw feedback door een reactie te plaatsen op CSS WG-probleem #9890 . Maak uzelf vertrouwd met de bekende problemen en beperkingen voordat u feedback geeft.
Als u een bug tegenkomt, meldt u dit dan als Chromium-bug om ons hiervan op de hoogte te stellen.