View Transitions API: live voorbeelden voor SPA en multipage | We.Inc
Werkende voorbeelden van de View Transitions API: startViewTransition in een lijst die u kunt schudden, benoemde elementen die morphen, @view-transition tussen pagina's, types, React en browsersupport.
Voorbeelden van de View Transitions API
De View Transitions API animeert tussen twee toestanden van een pagina. Wikkel in een single-page app de DOM-update in document.startViewTransition(() => update()). Voeg tussen pagina's op dezelfde origin @view-transition { navigation: auto; } toe aan beide pagina's. Geef een element een unieke view-transition-name en de browser morpht het van zijn oude positie naar de nieuwe.
Twee soorten view transitions
Binnen hetzelfde document (SPA)
Tussen documenten (MPA)
Hoe u hem start
document.startViewTransition()
@view-transition { navigation: auto; } op beide pagina's
Chrome en Edge
111 en hoger
126 en hoger
Safari
18 en hoger
18.2 en hoger
Firefox
144 en hoger
Nog niet ondersteund
Baseline
Nieuw beschikbaar (oktober 2025)
Geen Baseline
De meeste uitleg over view transitions beschrijft de boom van pseudo-elementen en houdt daar op. Deze pagina begint met een werkende demo in uw browser: schud een raster, open een kaart in een detailweergave en zie benoemde elementen bewegen. Daarna volgt de code voor elk patroon, de opzet tussen pagina's en de fallbacks voor browsers zonder support.
Druk op Schudden om het raster te herordenen. Elke tegel heeft een eigen view-transition-name, dus elke tegel glijdt naar zijn nieuwe plek.
Klik op een tegel om hem te openen. Het kleurvlak en de titel morphen naar de detailweergave omdat ze daar dezelfde namen hebben.
Als uw browser de API niet heeft, werkt de demo nog steeds direct bij en meldt hij dat.
Kopieer de snippets hieronder voor gewoon JavaScript, React en sites met meerdere pagina's.
Elke view-transition-name op de pagina moet uniek zijn op het moment van de snapshot. Een duplicaat laat de ready-promise rejecten en de transitie wordt overgeslagen.
Gebruik view-transition-name: match-element in een transitie binnen hetzelfde document om elk item in een lijst automatisch een naam te geven.
Haal data op voordat u startViewTransition aanroept. Het renderen staat stil terwijl de update-callback draait, dus een trage callback lijkt op vastlopen.
Controleer of document.startViewTransition bestaat voordat u het aanroept, en voer anders gewoon de update uit.
Zwak de animaties af binnen een query prefers-reduced-motion: reduce; de verandering van toestand gebeurt nog steeds.
Veelgestelde vragen
Wat doet document.startViewTransition?
Het maakt een snapshot van de huidige pagina, voert uw update-callback uit en animeert dan van de oude snapshot naar de live nieuwe toestand. Het geeft een ViewTransition-object terug met de promises ready, finished en updateCallbackDone en een methode skipTransition().
Hoe voeg ik view transitions toe tussen pagina's?
Zet @view-transition { navigation: auto; } in de CSS van zowel de pagina die u verlaat als de pagina waarop u aankomt. De pagina's moeten dezelfde origin hebben, en standaard krijgt u een cross-fade. Geef overeenkomende elementen op beide pagina's dezelfde view-transition-name om ze te laten morphen.
Werken view transitions in Firefox?
Transities binnen hetzelfde document werken vanaf Firefox 144. Transities tussen documenten werden op het moment van schrijven niet ondersteund in Firefox, dus in die browsers vindt de navigatie gewoon zonder animatie plaats.
Hoe gebruik ik view transitions in React?
Roep document.startViewTransition aan en werk de state bij binnen flushSync uit react-dom, zodat React de nieuwe DOM synchroon schrijft voordat de browser de nieuwe snapshot maakt.
Hoe pas ik de animatie aan?
Style de pseudo-elementen. ::view-transition-old(name) is de uitgaande snapshot en ::view-transition-new(name) de inkomende, en ::view-transition-group(name) regelt grootte en positie. Gebruik root als naam voor de hele pagina.
Wat er tijdens een transitie gebeurt
De browser legt de huidige toestand vast als afbeeldingen, één voor de pagina en één voor elk benoemd element. Hij voert uw update uit terwijl het renderen gepauzeerd is en legt daarna de nieuwe toestand vast.
Hij bouwt boven de pagina een boom van pseudo-elementen: een groep voor elke naam, met een oude en een nieuwe afbeelding. Standaard animeert de groep grootte en positie terwijl de twee afbeeldingen in elkaar overvloeien, en dat zorgt voor het morph-effect.
Elementen goed benoemen
Een naam koppelt een element in de oude toestand aan een element in de nieuwe toestand. Een productfoto in een lijst en de grote foto op de detailpagina kunnen een naam delen, zoals product-42, en de browser animeert de ene naar de andere.
Stel de naam alleen in waar het nodig is. Een element benoemen dat niet verandert, kost toch een aparte snapshot.
Types voor verschillende richtingen
startViewTransition accepteert ook een options-object met een update-functie en een array types. Een type zoals forwards of backwards kan dan in CSS worden opgepikt met de selector :active-view-transition-type(), zodat teruggaan de andere kant op schuift.
Voor navigatie tussen pagina's stelt de descriptor types binnen @view-transition op dezelfde manier types in.
Transities binnen hetzelfde document
startViewTransition met feature detection
Browsers zonder de API voeren de update direct uit, dus er gaat niets stuk.
Een thumbnail laten morphen naar een hero
Maar één element tegelijk mag de naam dragen, dus stel hem vlak voor de transitie in op de aangeklikte thumbnail.
React
startViewTransition met flushSync
flushSync laat React de nieuwe DOM binnen de callback committen.
Transities tussen documenten
Schuiven tussen pagina's van een site met meerdere pagina's
Neem dit op in de stylesheet van elke pagina die moet meedoen. Alleen binnen dezelfde origin.
API-referentie
De onderdelen van de View Transitions API
Naam
Soort
Wat het doet
document.startViewTransition(update)
Methode
Start een transitie binnen hetzelfde document en geeft een ViewTransition terug
ViewTransition.ready
Promise
Resolvet wanneer de pseudo-elementen bestaan en de animatie op het punt staat te beginnen
ViewTransition.finished
Promise
Resolvet wanneer de animatie eindigt en de nieuwe toestand live is
ViewTransition.updateCallbackDone
Promise
Resolvet wanneer uw update-callback klaar is
ViewTransition.skipTransition()
Methode
Slaat de animatie over; de update wordt nog steeds uitgevoerd
CSS-property
Geeft een element een eigen snapshot om te morphen
@view-transition
CSS-at-rule
Zet een pagina aan voor transities tussen documenten
::view-transition-old() / -new()
Pseudo-elementen
De uitgaande en inkomende snapshots
::view-transition-group()
Pseudo-element
Animeert grootte en positie voor één naam
pageswap / pagereveal
Events
Laten een script een transitie tussen documenten aanpassen
Haven
Weide
Gloed
Schemer
Leisteen
Koraal
Verminderde beweging staat aan, dus de verandering was direct.
Uw browser ondersteunt geen view transitions, dus de verandering was direct.
Live demo
Schud het raster of open een kaart. Elke tegel heeft een eigen view-transition-name, dus de browser animeert hem naar zijn nieuwe positie.
Schudden
Terug naar raster
Het kleurvlak en de titel morphten vanuit het raster omdat ze hier dezelfde namen houden.