Wat is er nieuw in weergaveovergangen (update 2025)

Bramus

Gepubliceerd: 8 oktober 2025

Er is veel veranderd sinds we in 2023 overgangen tussen verschillende documentweergaven introduceerden.

In 2024 introduceerden we overgangen tussen documentweergaven , voegden we verfijningen toe zoals view-transition-class en view transition types , en verwelkomden we Safari in de toevoeging van ondersteuning voor weergaveovergangen.

Dit bericht geeft een overzicht van de wijzigingen in weergaveovergangen in 2025.

Betere ondersteuning voor browsers en frameworks

Overgangen tussen weergaven van hetzelfde document worden binnenkort standaard beschikbaar.

Een belangrijk aandachtspunt van Interop 2025 is de View Transition API, met name overgangen tussen weergaven binnen hetzelfde document 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. Hiermee zullen deze functies standaard beschikbaar komen.

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

Het React-team heeft het hele jaar gewerkt aan het toevoegen van view-transities aan de kern van React. In april kondigden ze ondersteuning react@experimental aan en deze week, tijdens React Conf, hebben ze de ondersteuning verplaatst naar react@canary wat betekent dat het ontwerp bijna definitief is.

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

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

Je kunt de documentatie van React <ViewTransition> raadplegen voor alle details, of deze presentatie van Aurora Scharff bekijken voor een goede introductie tot het onderwerp.

Recent verzonden functies

Elementen automatisch benoemen met view-transition-name: match-element

Om een ​​element te markeren dat als onderdeel van een weergaveovergang moet worden vastgelegd, geef je het een view-transition-name . Dit is essentieel voor weergaveovergangen, omdat het functies zoals de overgang tussen twee verschillende elementen mogelijk maakt. Elk element heeft dezelfde view-transition-name aan beide zijden van de overgang, en weergaveovergangen regelen de rest voor je.

Het bedenken van unieke namen voor elementen kan echter omslachtig worden wanneer je veel elementen verplaatst die in wezen niet veranderen. Als je 100 elementen in een lijst hebt die wel of niet veranderen, moet je 100 unieke namen bedenken.

Dankzij match-element hoeft u dat allemaal niet te doen. Wanneer u dit als waarde voor view-transition-name gebruikt, 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 verschijnt of verdwijnt, krijgt een expliciete naam. Die naam wordt in de CSS gebruikt om specifieke animaties aan die momentopname te koppelen. De momentopnamen van alle andere kaarten worden gestyled met behulp van de view-transition-class die eraan is gekoppeld.

/* 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 overgangen tussen weergaven te debuggen, kunt u het paneel Animaties in de Ontwikkeltools gebruiken om alle animaties te pauzeren. Dit geeft u de tijd om de pseudo-elementen te inspecteren zonder dat u zich zorgen hoeft te maken of de overgang tussen weergaven wel voltooid is. U kunt zelfs handmatig door de tijdlijn van de animatie scrollen om te zien hoe de overgangen zich afspelen.

Voorheen toonde Chrome DevTools bij het inspecteren van een van de ::view-transition-* pseudo-elementen geen regels die specifiek gericht waren op pseudo-elementen die gebruik maakten van hun ingestelde view-transition-class . Dit veranderde in Chrome 139, waarin deze functionaliteit werd toegevoegd.

Geneste weergaveovergangsgroepen zijn beschikbaar vanaf Chrome 140.

Wanneer een weergaveovergang wordt uitgevoerd, worden de vastgelegde elementen 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 dat alle vastgelegde weergaveovergangsgroepen onder één enkel pseudo-element ::view-transition vallen.

Deze platte boomstructuur is voldoende voor veel toepassingen, maar wordt problematisch bij het gebruik van visuele effecten zoals uitsnijden of 3D-transformaties. Deze vereisen namelijk een zekere hiërarchie in de boomstructuur.

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

Leer hoe je weergaveovergangsgroepen gebruikt.

Pseudo-elementen erven nu meer animatie-eigenschappen.

Wanneer je een van de lange animation-* eigenschappen instelt op een ::view-transition-group(…) pseudo-element, erven de daarin opgenomen ::view-transition-image-pair(…) , ::view-transition-old(…) en ::view-transition-new(…) ook die eigenschap. Dit is handig omdat het de overgang tussen ::view-transition-new(…) en ::view-transition-old(…) automatisch synchroon houdt met de ::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 naar het overerven van meer animatie-eigenschappen.

Browsers die schermovergangen ondersteunen, moeten nu het volgende in hun user-agent stylesheet hebben staan.

: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 die meer eigenschappen overerven, zijn geïntroduceerd in Chrome 140.

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

Bij het gebruik van een finished promise om een ​​callback uit te voeren, wachtte Chrome voorheen tot er een frame was gegenereerd voordat die logica werd uitgevoerd. Dit kon een flikkering veroorzaken aan het einde van de animatie wanneer het script bepaalde stijlen verplaatste in een poging om een ​​visueel vergelijkbare staat 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 aanpassing in timing corrigeert de situatie door de stappen voor het opruimen van de weergaveovergang asynchroon uit te voeren nadat de levenscyclus is voltooid. Dit zorgt ervoor dat het visuele frame dat wordt geproduceerd wanneer de promise finished , de structuur van de weergaveovergang behoudt, waardoor flikkeren wordt voorkomen.

Deze timingwijziging werd geïntroduceerd in Chrome 140.

Aankomende functies

Het jaar is nog niet voorbij, dus er is nog tijd om een ​​aantal nieuwe functies uit te brengen.

De overgangen tussen scoped views zijn klaar om te worden getest in Chrome 140.

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

Met scoped transitions kunnen meerdere view transitions tegelijkertijd worden uitgevoerd (zolang ze maar verschillende transition roots hebben). Pointer events worden alleen op die subboom geblokkeerd (die je later weer kunt inschakelen), in plaats van op het hele document. Bovendien kunnen elementen buiten de transition root bovenop de scoped view transition worden getekend.

In de volgende demo kunt u een stip binnen de container verplaatsen door op een van de knoppen te klikken. Dit kan met document-scoped view transitions of element-scoped view transitions, zodat u kunt zien hoe ze zich anders gedragen.

De functie is vanaf Chrome 140 beschikbaar voor testen, mits de optie "Experimental Web Platform features" is 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-tag ::view-transition wordt momenteel gepositioneerd met position: fixed . Na een resolutie van de CSS Working Group zal dit veranderen naar position: absolute .

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

document.activeViewTransition komt naar Chrome 142

Wanneer een weergaveovergang wordt gestart, wordt een ViewTransition instantie aangemaakt. Dit object bevat verschillende promises en functionaliteit om de voortgang van de overgang te volgen, en maakt manipulaties mogelijk zoals het overslaan van de overgang of het wijzigen van de typen ervan.

In plaats van dat je deze instantie handmatig moet bijhouden, biedt Chrome nu een ` document.activeViewTransition -eigenschap die dit object vertegenwoordigt. Als er geen overgang gaande is, is de waarde ervan null .

Voor weergaveovergangen binnen hetzelfde document wordt de waarde ingesteld wanneer u document.startViewTransition aanroept. Voor weergaveovergangen tussen verschillende documenten kunt u die ViewTransition instantie benaderen in de pageswap en pagereveal gebeurtenissen.

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

Voorkom dat een weergaveovergang automatisch wordt voltooid met ViewTransition.waitUntil

Een viewtransitie bereikt automatisch de finished status wanneer alle animaties zijn voltooid. Om dit automatisch voltooien te voorkomen, kunt u binnenkort ViewTranistion.waitUntil gebruiken. Wanneer u een promise doorgeeft, bereikt de ViewTransition pas de finished status wanneer die promise ook is opgelost.

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

Deze wijziging komt later dit jaar en maakt het bijvoorbeeld mogelijk om te wachten op een fetch of om de implementatie van een scrollgestuurde weergaveovergang te vereenvoudigen.

Wat volgt?

Zoals u ziet, hebben we niet stilgezeten sinds we in 2023 de eerste View Transitions introduceerden. We kijken ernaar uit om in de toekomst View Transitions met een beperkt bereik uit te brengen en staan, zoals altijd, open voor feedback.

Als je een vraag hebt over view transitions, neem dan contact met ons op via sociale media. Functieverzoeken voor view transitions kunnen worden ingediend bij de CSS WG . Mocht je een bug tegenkomen, meld dit dan via een Chromium-bugrapport .