Chrome 147 maakt gelijktijdige en geneste weergaveovergangen mogelijk met element-specifieke weergaveovergangen.

Bramus

Gepubliceerd: 27 maart 2026

Chrome 147 introduceert element-scoped view transitions, een functie waarmee je een view transition kunt starten op een subboom van de DOM door Element.startViewTransition() aan te roepen.

Deze functie maakt het mogelijk om meerdere weergaveovergangen tegelijkertijd uit te voeren, stelt je in staat om doorlopende weergaveovergangen te nesten en lost problemen met gelaagdheid op bij content met position: fixed – en dat alles terwijl de rest van de pagina interactief blijft.

Wat is er veranderd?

Sinds we hebben aangekondigd dat de functie klaar is voor ontwikkelaarstests in Chrome 140 , hebben we samengewerkt met de community en de CSS Working Group om de details af te ronden, met name wat betreft het standaardgedrag:

• Scope-roots zijn standaard zelfparticipatief.
• Scoped view transitions bevatten automatisch hun geneste pseudo's door gebruik te maken van geneste view transition groups .
• De pseudo-functie ::view-transition-group-children() in een scoped view transition knipt automatisch de inhoud af als de scope root de overloop afknipt.
• Element-scoped view transitions passen automatisch contain: layout en view-transition-scope: all toe op de root van het bereik tijdens de overgang.

Na deze updates zijn element-scoped view transitions beschikbaar in Chrome Stable vanaf versie 147.

Demo's

Lijsten schudden

Met deze demo kunt u de items in elke lijst door elkaar schudden. U kunt ook de posities van de lijsten verwisselen door op de knop in het midden te klikken.

Omdat er gebruik wordt gemaakt van element-scoped view transitions, kunnen beide lijsten hun shuffle view transitions tegelijkertijd uitvoeren. Je kunt ook de buitenste view transition starten, die de posities van de lijsten verwisselt, terwijl de lijstitems nog worden herschikt.

Mijn reis naar Patagonië

De demo "My Patagonia Trip" demonstreert overgangen in de weergave op elementniveau. Deze demo is gebaseerd op de campagnevideo "Web UX, re-imagined" .

Gebruik de keuzemenu's om de items in het raster te filteren. Gebruik de knop 'Toevoegen ' bij elk item in het raster om het toe te voegen aan de lijst met geselecteerde items, die in de zijbalk verschijnt.

De demo maakt op drie plaatsen gebruik van element-specifieke weergaveovergangen:

• Het raster met items bij het filteren ervan.
• De items in het raster worden toegevoegd aan de lijst met geselecteerde items.
• De zijbalk die de lijst met geselecteerde items weergeeft.

Lees de handleiding

Om alles te leren over element-scoped view transitions, lees de handleiding . Deze laat zien hoe je element-scoped view transitions implementeert, geeft aanvullende details en bevat meer voorbeelden.

Lees de handleiding voor weergaveovergangen op elementniveau.