jquery.app
Nederlands
EnglishDeutschFrancaisEspanol日本語Nederlands

CSS-tools

Gratis View Transition Builder

Generate View Transitions API CSS and JavaScript for smooth page and element transitions. Same-document (SPA) and cross-document (MPA) support with reduced-motion fallback.

Tool laden...

Wat is View Transition Builder?

De View Transitions API creëert vloeiende geanimeerde overgangen bij het navigeren tussen pagina's of het bijwerken van pagina-inhoud. De browser maakt screenshots van de oude en nieuwe toestanden en vervaagt vervolgens tussen beide. U kunt view-transition-name toewijzen aan specifieke elementen om ze onafhankelijk te animeren tijdens de overgang. Voor same-document transities (SPA's) gebruikt u document.startViewTransition(). Voor cross-document (MPA's) voegt u een meta-tag toe.

Snel antwoord

Gebruik de View Transitions API voor vloeiende pagina- en elementanimaties. Voor SPA's: document.startViewTransition(() => updateDOM()). Voor MPA's: voeg <meta name="view-transition" content="same-origin"> toe aan de head. Wijs view-transition-name toe aan elementen voor onafhankelijke animatie. Respecteer altijd prefers-reduced-motion.

Last updated: 2026-05-28

Beperkingen

  • Cross-document (MPA) transities werken alleen tussen pagina's van dezelfde oorsprong. Cross-origin navigatie activeert geen weergavetransitie, zelfs niet met de meta-tag.
  • De browser maakt statische screenshots van de oude en nieuwe toestanden. Live inhoud zoals video's, animaties of continu bijwerkende elementen kunnen bevroren lijken tijdens de overgang.
  • View Transitions zijn Baseline 2025: Chrome 111+, Edge 111+, Safari 18.2+. Firefox-ondersteuning is in ontwikkeling. Niet-ondersteunde browsers navigeren zonder animatie — de functie degradeert netjes.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

Zo gebruik je deze tool

  1. Kies het overgangstype: same-document (voor SPA-inhoudsupdates) of cross-document (voor MPA-paginanavigatie).
  2. Stel animatieduur, easing en de view-transition-name in voor elementen die onafhankelijk moeten animeren.
  3. Pas optioneel de ::view-transition-new en ::view-transition-old pseudo-elementen aan.
  4. Kopieer de CSS en JavaScript/meta-tag. Schakel prefers-reduced-motion fallback in voor toegankelijkheid.

Waarvoor je het kunt gebruiken

  • Animeer een hero-afbeelding tussen een lijstpagina en een detailpagina met dezelfde view-transition-name op beide pagina's.
  • Voeg een vloeiende crossfade toe bij het navigeren tussen pagina's in een statische site door de view-transition meta-tag toe te voegen.
  • Animeer een galerijfilter: roep startViewTransition() aan voordat u het afbeeldingsgrid bijwerkt voor een vloeiende layoutwijziging.

Gebruik

Praktische voorbeelden

Voorbeeld

Hero-afbeelding morph tussen pagina's

Een blog heeft een hero-afbeelding op de lijstpagina en een grotere versie op de artikelpagina. Geef beide afbeeldingen dezelfde view-transition-name: hero-image. De browser animeert de afbeelding van zijn lijstpositie naar de artikelpositie tijdens de navigatie.

Voorbeeld

SPA-inhoudswissel

Een dashboard filtert een gegevenstabel. Wikkel de filterupdate in document.startViewTransition(() => updateTable()). De oude tabelrijen vervagen terwijl nieuwe rijen in beeld komen — geen handmatige animatiecode nodig.

Veelgemaakte fouten

  • Twee elementen dezelfde view-transition-name geven op dezelfde pagina — namen moeten uniek zijn per pagina. De browser geeft een foutmelding en slaat de overgang over.
  • De meta-tag vergeten in de pagina-head voor MPA-transities — cross-document transities werken niet zonder.
  • Geen rekening houden met prefers-reduced-motion — gebruikers met bewegingsgevoeligheid moeten directe overgangen krijgen in plaats van animaties.

Verificatie

  1. Test de overgang door tussen pagina's te navigeren of de inhoudsupdate te activeren en de animatie te observeren.
  2. Controleer of prefers-reduced-motion: reduce de overgang uitschakelt en een directe inhoudswissel toont.

FAQ

Vragen over View Transition Builder

Kan ik specifieke elementen animeren in plaats van de hele pagina?

Ja. Wijs view-transition-name toe aan individuele elementen (zoals .hero img of .card). Elk genoemd element krijgt zijn eigen ::view-transition-old() en ::view-transition-new() pseudo-elementen die u onafhankelijk kunt animeren. Elementen zonder view-transition-name nemen deel aan de standaard crossfade.

Gerelateerde tools

Meer css-tools

Css

CSS Carousel Generator

Generate native CSS carousel markup with scroll-snap, scroll buttons, scroll markers, and accessible list structure. No JavaScript required.

Open tool

Probeer ook

Probeer ook

Html

CSP Hash Generator

Genereer CSP-hashwaarden voor inline scripts en styles. Hash exacte code met SHA-256, SHA-384 of SHA-512.

Open tool