Wat is er nieuw in weergaveovergangen (update 2025)

Bramus

Gepubliceerd: 8 okt. 2025

Er is veel veranderd sinds we in 2023 overgangen voor dezelfde documentweergave introduceerden.

In 2024 hebben we weergaveovergangen tussen documenten uitgebracht, verbeteringen toegevoegd zoals view-transition-class en view transition types en Safari verwelkomd met de toevoeging van ondersteuning voor weergaveovergangen.

In dit bericht vindt u een overzicht van de wijzigingen in weergaveovergangen in 2025.

Betere browser- en frameworkondersteuning

Overgangen in dezelfde documentweergave worden binnenkort Baseline Nieuw beschikbaar

Een aandachtsgebied van Interop 2025 is de View Transition API, met name overgangen in dezelfde documentweergave met document.startViewTransition(updateCallback) , view-transition-class , automatische naamgeving met view-transition-name: match-element en de CSS-selector :active-view-transition .

Firefox is van plan deze functies op te nemen in de aankomende Firefox 144-release, die op 14 oktober 2025 stabiel wordt. Hierdoor worden deze functies Baseline Newly beschikbaar.

Ondersteuning voor de View Transition API is nu beschikbaar in React Core

Het React-team heeft het hele jaar door gewerkt aan het toevoegen van weergaveovergangen aan de kern van React. Ze kondigden in april al ondersteuning react@experimental aan en deze week, tijdens de React Conf, hebben ze de ondersteuning ervan verplaatst naar react@canary wat betekent dat het ontwerp bijna af is.

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

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

Bekijk de <ViewTransition> -documentatie van React voor meer informatie. U kunt ook deze presentatie van Aurora Scharff bekijken voor een goede introductie over dit onderwerp.

Recent verzonden functies

Automatische naamgeving van elementen met view-transition-name: match-element

Om een ​​element te markeren voor snapshot als onderdeel van een weergaveovergang, geeft u het een view-transition-name . Dit is essentieel voor weergaveovergangen, omdat het functies zoals overgangen tussen twee verschillende elementen ontgrendelt. Elk element heeft dezelfde view-transition-name waarde aan beide kanten van de overgang, en weergaveovergangen regelen dit voor u.

Het geven van unieke namen aan elementen kan echter lastig zijn bij het overzetten van veel elementen die niet echt veranderen. Als je 100 elementen in een lijst hebt die verschuiven, moet je 100 unieke namen bedenken.

Dankzij match-element hoeft u dat allemaal niet te doen. Wanneer u dit gebruikt als waarde voor view-transition-name , genereert de browser een interne view-transition-name voor elk overeenkomend element op basis van de identiteit van het element.

In de volgende demo wordt deze aanpak gebruikt. Elke kaart in de rij krijgt een automatisch gegenereerde view-transition-name .

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

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

De kaart die binnenkomt of verlaat, krijgt een expliciete naam. Die naam wordt in de CSS gebruikt om specifieke animaties aan die snapshot te koppelen. De snapshots van alle andere kaarten worden gestyled met behulp van de bijbehorende view-transition-class .

/* 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 toont nu regels die gericht zijn op pseudo's die een view-transition-class gebruiken

Om weergaveovergangen te debuggen, kun je het Animaties-paneel van DevTools gebruiken om alle animaties te pauzeren. Dit geeft je de tijd om de pseudo-elementen te inspecteren zonder dat je je zorgen hoeft te maken dat de weergaveovergang zijn voltooide status bereikt. Je kunt zelfs handmatig door de tijdlijnen van de animatie scrollen om te zien hoe de overgangen verlopen.

Voorheen werden bij het inspecteren van een van de ::view-transition-* pseudo-elementen in Chrome DevTools geen regels weergegeven die gericht waren op pseudo's met behulp van hun set view-transition-class . Dit is gewijzigd in Chrome 139, waarmee deze functionaliteit is toegevoegd.

Geneste weergave-overgangsgroepen zijn beschikbaar vanaf Chrome 140

Wanneer een weergaveovergang wordt uitgevoerd, worden de elementen waarvan een snapshot is gemaakt, weergegeven in een boomstructuur van pseudo-elementen. Standaard is de gegenereerde boomstructuur "plat". Dit betekent dat de oorspronkelijke hiërarchie in de DOM verloren gaat en alle vastgelegde weergaveovergangsgroepen onder één pseudo-element ::view-transition vallen.

Deze platte boombenadering is voor veel toepassingen voldoende, maar wordt problematisch wanneer visuele effecten zoals clipping of 3D-transformaties worden gebruikt. Deze vereisen een zekere hiërarchie in de boom.

Dankzij "Geneste weergave-overgangsgroepen" kunt u nu ::view-transition-group pseudo-elementen in elkaar nesten. Wanneer weergave-overgangsgroepen genest zijn, is het mogelijk om effecten zoals clipping tijdens de overgang te herstellen.

Leer hoe u weergave-overgangsgroepen gebruikt

Pseudo-elementen erven nu meer animatie-eigenschappen

Wanneer u een van de animation-* longhand-eigenschappen instelt op een pseudo ::view-transition-group(…) , erven de daarin opgenomen ::view-transition-image-pair(…) , ::view-transition-old(…) ::view-transition-new(…) ook die eigenschap. Dit is handig omdat de overgang tussen ::view-transition-new(…) ::view-transition-old(…) automatisch synchroon blijft met ::view-transition-group(…) .

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

Aanvankelijk was deze overerving beperkt tot animation-duration en animation-fill-mode (en later ook animation-delay ), maar nu is dit uitgebreid om meer animaties met lange looptijden over te erven.

Browsers die weergave-overgangen ondersteunen, zouden nu het volgende in hun user-agent-stijlblad moeten hebben

: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;
}

De pseudo-elementen erven meer eigenschappen die in Chrome 140 zijn meegeleverd.

De uitvoering van de finished belofte-callback wacht niet langer op een frame

Bij het gebruik van de finished belofte om een ​​callback uit te voeren, wachtte Chrome tot er een frame was geproduceerd voordat die logica werd uitgevoerd. Dit kon een flikkering aan het einde van de animatie veroorzaken wanneer het script bepaalde stijlen verplaatste in een poging een visueel vergelijkbare status te behouden.

 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;
});

Deze timingwijziging corrigeert de situatie door de opschoonstappen voor de weergaveovergang te verplaatsen naar asynchroon nadat de levenscyclus is voltooid. Dit zorgt ervoor dat het visuele frame dat wordt geproduceerd bij de resolutie van finished promise nog steeds de structuur van de weergaveovergang behoudt, waardoor flikkering wordt voorkomen.

Deze timingwijziging is doorgevoerd in Chrome 140.

Aankomende functies

Het jaar is nog niet om, dus er is nog tijd om nog meer functies uit te brengen.

Overgangen in beperkte weergave zijn klaar voor testen in Chrome 140

Scoped view transitions is een voorgestelde uitbreiding van de View Transition API waarmee u een weergaveovergang kunt starten op een subboom van de DOM door element.startViewTransition() aan te roepen (in plaats van document.startViewTransition() ) op een willekeurig HTMLElement .

Met scoped transitions kunnen meerdere weergaveovergangen tegelijkertijd worden uitgevoerd (zolang ze maar verschillende overgangsroots hebben). Pointergebeurtenissen worden alleen op die substructuur (die u weer kunt inschakelen) voorkomen, in plaats van op het hele document. Bovendien kunnen elementen buiten de overgangsroot over de scoped view-overgang worden getekend.

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.

De functie is klaar om te testen vanuit Chrome 140 met de vlag 'Experimentele webplatformfuncties' ingeschakeld in chrome://flags . We zijn actief op zoek naar feedback van ontwikkelaars.

De positie van ::view-transition verandert van fixed naar absolute in Chrome 142

De pseudo ::view-transition wordt momenteel gepositioneerd met position: fixed . Na een oplossing van de CSS Working Group wordt dit gewijzigd naar position: absolute .

Deze verandering van position van fixed naar absolute – die binnenkort beschikbaar is in Chrome 142 – is visueel niet waarneembaar, omdat het blok waarin de pseudo ::view-transition zich bevindt, sowieso het blok is dat de snapshot bevat. Het enige waarneembare effect is een andere position bij het uitvoeren van een getComputedStyle .

document.activeViewTransition komt naar Chrome 142

Wanneer een weergaveovergang wordt gestart, wordt er een ViewTransition instantie aangemaakt. Dit object bevat verschillende beloftes en functionaliteiten om de voortgang van de overgang te volgen en manipulaties mogelijk te maken, zoals het overslaan van de overgang of het wijzigen van de typen.

In plaats van dat u dit exemplaar handmatig moet bijhouden, biedt Chrome nu een eigenschap document.activeViewTransition die dit object vertegenwoordigt. Als er geen overgang actief is, is de waarde null .

Voor overgangen tussen documentweergaven wordt de waarde ingesteld wanneer u document.startViewTransition aanroept. Voor overgangen tussen documentweergaven kunt u die ViewTransition instantie benaderen via de gebeurtenissen pageswap en pagereveal .

Ondersteuning voor document.activeViewTransition wordt binnenkort meegeleverd in Chrome 142.

Voorkom dat een weergaveovergang automatisch wordt voltooid met ViewTransition.waitUntil

Een weergaveovergang bereikt automatisch de finished status wanneer alle animaties zijn voltooid. Om dit automatisch voltooien te voorkomen, kunt u binnenkort ViewTranistion.waitUntil gebruiken. Bij het doorgeven van een belofte bereikt de ViewTransition pas de finished status wanneer die belofte ook is opgelost.

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

Deze wijziging wordt later dit jaar doorgevoerd en maakt het bijvoorbeeld mogelijk om te wachten op een fetch of om de eenvoudigere implementatie van een scroll-gestuurde weergaveovergang te ontgrendelen.

Wat volgt er?

Zoals u kunt zien, hebben we niet stilgezeten sinds we in 2023 voor het eerst View Transitions lanceerden. We kijken ernaar uit om in de toekomst scoped view transitions te lanceren en staan, zoals altijd, open voor feedback.

Heb je een vraag over weergaveovergangen? Neem dan contact met ons op via social media. Verzoeken om functionaliteit voor weergaveovergangen kun je indienen bij de CSS WG . Mocht je een bug tegenkomen, meld dit dan via een Chromium-bug om ons hiervan op de hoogte te stellen.

Bramus

Gepubliceerd: 8 okt. 2025

Er is veel veranderd sinds we in 2023 overgangen voor dezelfde documentweergave introduceerden.

In 2024 hebben we weergaveovergangen tussen documenten uitgebracht, verbeteringen toegevoegd zoals view-transition-class en view transition types en Safari verwelkomd met de toevoeging van ondersteuning voor weergaveovergangen.

In dit bericht vindt u een overzicht van de wijzigingen in weergaveovergangen in 2025.

Betere browser- en frameworkondersteuning

Overgangen in dezelfde documentweergave worden binnenkort Baseline Nieuw beschikbaar

Een aandachtsgebied van Interop 2025 is de View Transition API, met name overgangen in dezelfde documentweergave met document.startViewTransition(updateCallback) , view-transition-class , automatische naamgeving met view-transition-name: match-element en de CSS-selector :active-view-transition .

Firefox is van plan deze functies op te nemen in de aankomende Firefox 144-release, die op 14 oktober 2025 stabiel wordt. Hierdoor worden deze functies Baseline Newly beschikbaar.

Ondersteuning voor de View Transition API is nu beschikbaar in React Core

Het React-team heeft het hele jaar door gewerkt aan het toevoegen van weergaveovergangen aan de kern van React. Ze kondigden in april al ondersteuning react@experimental aan en deze week, tijdens de React Conf, hebben ze de ondersteuning ervan verplaatst naar react@canary wat betekent dat het ontwerp bijna af is.

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

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

Bekijk de <ViewTransition> -documentatie van React voor meer informatie. U kunt ook deze presentatie van Aurora Scharff bekijken voor een goede introductie over dit onderwerp.

Recent verzonden functies

Automatische naamgeving van elementen met view-transition-name: match-element

Om een ​​element te markeren voor snapshot als onderdeel van een weergaveovergang, geeft u het een view-transition-name . Dit is essentieel voor weergaveovergangen, omdat het functies zoals overgangen tussen twee verschillende elementen ontgrendelt. Elk element heeft dezelfde view-transition-name waarde aan beide kanten van de overgang, en weergaveovergangen regelen dit voor u.

Het geven van unieke namen aan elementen kan echter lastig zijn bij het overzetten van veel elementen die niet echt veranderen. Als je 100 elementen in een lijst hebt die verschuiven, moet je 100 unieke namen bedenken.

Dankzij match-element hoeft u dat allemaal niet te doen. Wanneer u dit gebruikt als waarde voor view-transition-name , genereert de browser een interne view-transition-name voor elk overeenkomend element op basis van de identiteit van het element.

In de volgende demo wordt deze aanpak gebruikt. Elke kaart in de rij krijgt een automatisch gegenereerde view-transition-name .

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

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

De kaart die binnenkomt of verlaat, krijgt een expliciete naam. Die naam wordt in de CSS gebruikt om specifieke animaties aan die snapshot te koppelen. De snapshots van alle andere kaarten worden gestyled met behulp van de bijbehorende view-transition-class .

/* 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 toont nu regels die gericht zijn op pseudo's die een view-transition-class gebruiken

Om weergaveovergangen te debuggen, kun je het Animaties-paneel van DevTools gebruiken om alle animaties te pauzeren. Dit geeft je de tijd om de pseudo-elementen te inspecteren zonder dat je je zorgen hoeft te maken dat de weergaveovergang zijn voltooide status bereikt. Je kunt zelfs handmatig door de tijdlijnen van de animatie scrollen om te zien hoe de overgangen verlopen.

Voorheen werden bij het inspecteren van een van de ::view-transition-* pseudo-elementen in Chrome DevTools geen regels weergegeven die gericht waren op pseudo's met behulp van hun set view-transition-class . Dit is gewijzigd in Chrome 139, waarmee deze functionaliteit is toegevoegd.

Geneste weergave-overgangsgroepen zijn beschikbaar vanaf Chrome 140

Wanneer een weergaveovergang wordt uitgevoerd, worden de elementen waarvan een snapshot is gemaakt, weergegeven in een boomstructuur van pseudo-elementen. Standaard is de gegenereerde boomstructuur "plat". Dit betekent dat de oorspronkelijke hiërarchie in de DOM verloren gaat en alle vastgelegde weergaveovergangsgroepen onder één pseudo-element ::view-transition vallen.

Deze platte boombenadering is voor veel toepassingen voldoende, maar wordt problematisch wanneer visuele effecten zoals clipping of 3D-transformaties worden gebruikt. Deze vereisen een zekere hiërarchie in de boom.

Dankzij "Geneste weergave-overgangsgroepen" kunt u nu ::view-transition-group pseudo-elementen in elkaar nesten. Wanneer weergave-overgangsgroepen genest zijn, is het mogelijk om effecten zoals clipping tijdens de overgang te herstellen.

Leer hoe u weergave-overgangsgroepen gebruikt

Pseudo-elementen erven nu meer animatie-eigenschappen

Wanneer u een van de animation-* longhand-eigenschappen instelt op een pseudo ::view-transition-group(…) , erven de daarin opgenomen ::view-transition-image-pair(…) , ::view-transition-old(…) ::view-transition-new(…) ook die eigenschap. Dit is handig omdat de overgang tussen ::view-transition-new(…) ::view-transition-old(…) automatisch synchroon blijft met ::view-transition-group(…) .

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

Aanvankelijk was deze overerving beperkt tot animation-duration en animation-fill-mode (en later ook animation-delay ), maar nu is dit uitgebreid om meer animaties met lange looptijden over te erven.

Browsers die weergave-overgangen ondersteunen, zouden nu het volgende in hun user-agent-stijlblad moeten hebben

: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;
}

De pseudo-elementen erven meer eigenschappen die in Chrome 140 zijn meegeleverd.

De uitvoering van de finished belofte-callback wacht niet langer op een frame

Bij het gebruik van de finished belofte om een ​​callback uit te voeren, wachtte Chrome tot er een frame was geproduceerd voordat die logica werd uitgevoerd. Dit kon een flikkering aan het einde van de animatie veroorzaken wanneer het script bepaalde stijlen verplaatste in een poging een visueel vergelijkbare status te behouden.

 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;
});

Deze timingwijziging corrigeert de situatie door de opschoonstappen voor de weergaveovergang te verplaatsen naar asynchroon nadat de levenscyclus is voltooid. Dit zorgt ervoor dat het visuele frame dat wordt geproduceerd bij de resolutie van finished promise nog steeds de structuur van de weergaveovergang behoudt, waardoor flikkering wordt voorkomen.

Deze timingwijziging is doorgevoerd in Chrome 140.

Aankomende functies

Het jaar is nog niet om, dus er is nog tijd om nog meer functies uit te brengen.

Overgangen in beperkte weergave zijn klaar voor testen in Chrome 140

Scoped view transitions is een voorgestelde uitbreiding van de View Transition API waarmee u een weergaveovergang kunt starten op een subboom van de DOM door element.startViewTransition() aan te roepen (in plaats van document.startViewTransition() ) op een willekeurig HTMLElement .

Met scoped transitions kunnen meerdere weergaveovergangen tegelijkertijd worden uitgevoerd (zolang ze maar verschillende overgangsroots hebben). Pointergebeurtenissen worden alleen op die substructuur (die u weer kunt inschakelen) voorkomen, in plaats van op het hele document. Bovendien kunnen elementen buiten de overgangsroot over de scoped view-overgang worden getekend.

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.

De functie is klaar om te testen vanuit Chrome 140 met de vlag 'Experimentele webplatformfuncties' ingeschakeld in chrome://flags . We zijn actief op zoek naar feedback van ontwikkelaars.

De positie van ::view-transition verandert van fixed naar absolute in Chrome 142

De pseudo ::view-transition wordt momenteel gepositioneerd met position: fixed . Na een oplossing van de CSS Working Group wordt dit gewijzigd naar position: absolute .

Deze verandering van position van fixed naar absolute – die binnenkort beschikbaar is in Chrome 142 – is visueel niet waarneembaar, omdat het blok waarin de pseudo ::view-transition zich bevindt, sowieso het blok is dat de snapshot bevat. Het enige waarneembare effect is een andere position bij het uitvoeren van een getComputedStyle .

document.activeViewTransition komt naar Chrome 142

Wanneer een weergaveovergang wordt gestart, wordt er een ViewTransition instantie aangemaakt. Dit object bevat verschillende beloftes en functionaliteiten om de voortgang van de overgang te volgen en manipulaties mogelijk te maken, zoals het overslaan van de overgang of het wijzigen van de typen.

In plaats van dat u dit exemplaar handmatig moet bijhouden, biedt Chrome nu een eigenschap document.activeViewTransition die dit object vertegenwoordigt. Als er geen overgang actief is, is de waarde null .

Voor overgangen tussen documentweergaven wordt de waarde ingesteld wanneer u document.startViewTransition aanroept. Voor overgangen tussen documentweergaven kunt u die ViewTransition instantie benaderen via de gebeurtenissen pageswap en pagereveal .

Ondersteuning voor document.activeViewTransition wordt binnenkort meegeleverd in Chrome 142.

Voorkom dat een weergaveovergang automatisch wordt voltooid met ViewTransition.waitUntil

Een weergaveovergang bereikt automatisch de finished status wanneer alle animaties zijn voltooid. Om dit automatisch voltooien te voorkomen, kunt u binnenkort ViewTranistion.waitUntil gebruiken. Bij het doorgeven van een belofte bereikt de ViewTransition pas de finished status wanneer die belofte ook is opgelost.

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

Deze wijziging wordt later dit jaar doorgevoerd en maakt het bijvoorbeeld mogelijk om te wachten op een fetch of om de eenvoudigere implementatie van een scroll-gestuurde weergaveovergang te ontgrendelen.

Wat volgt er?

Zoals u kunt zien, hebben we niet stilgezeten sinds we in 2023 voor het eerst View Transitions lanceerden. We kijken ernaar uit om in de toekomst scoped view transitions te lanceren en staan, zoals altijd, open voor feedback.

Heb je een vraag over weergaveovergangen? Neem dan contact met ons op via social media. Verzoeken om functionaliteit voor weergaveovergangen kun je indienen bij de CSS WG . Mocht je een bug tegenkomen, meld dit dan via een Chromium-bug om ons hiervan op de hoogte te stellen.