Overgangen tussen documenten

Met weergaveovergangen tussen documenten kun je soepele, app-achtige overgangen maken tussen verschillende pagina's van een app met meerdere pagina's (MPA). De browser voert standaard een crossfade uit, maar je kunt dit aanpassen aan de esthetiek van je site.

Stapsgewijze implementatie

1. Aanmelden voor weergaveovergangen tussen documenten

Zowel de bron- als de bestemmingspagina moeten zich aanmelden voor weergaveovergangen, zodat de browser deze kan activeren bij navigatie.

/* Respect user's preference for reduced motion */
@media (prefers-reduced-motion: no-preference) {
  /* Add to a global stylesheet shared by both pages */
  @view-transition {
    /* Enables transitions for same-origin navigations */
    navigation: auto;
  }
}

2. Overgangsanimaties aanpassen (optioneel)

Je kunt de oude en nieuwe status van de overgang targeten met pseudo-elementen om effecten zoals dia's of onthullingen te maken.

/* Customizing the outgoing page animation */
::view-transition-old(root) {
  /* Move the old page out to the left */
  animation: 0.4s ease-in both slide-out;
}

/* Customizing the incoming page animation */
::view-transition-new(root) {
  /* Move the new page in from the right */
  animation: 0.4s ease-out both slide-in;
}

@keyframes slide-out {
  to { transform: translateX(-20%); opacity: 0; }
}

@keyframes slide-in {
  from { transform: translateX(100%); }
}

3. Directionele overgangen maken (optioneel)

Misschien wil je verschillende overgangseffecten, afhankelijk van de pagina's waartussen je navigeert. Als je bijvoorbeeld van een homepage naar een contactpagina navigeert, wil je misschien dat nieuwe content van rechts komt. Als je teruggaat naar de homepage, is het niet logisch om hetzelfde effect te hebben.

Als de pagina waarnaar je navigeert altijd hetzelfde overgangstype heeft, ongeacht hoe je naar de pagina gaat, kun je dit aangeven met types in de regel @view-transition.

@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
    /* Specify the types of view transitions that will always be used on this page. */
    types: previous;
  }
}

Je kunt ook voorwaardelijk overgangstypen opgeven in een event-listener voor pagereveal.

window.addEventListener("pagereveal", async (e) => {
  if (e.viewTransition && window.navigation?.activation) {
    // Use application-specific logic to compute a transition type
     const transitionType = yourTransitionTypeLogic(navigation.activation.from, navigation.activation.entry);
    e.viewTransition.types.add(transitionType);
  }
});

Gebruik daarna de pseudoselector :active-view-transition-type() om de verschillende animaties voor elk type toe te passen.

:active-view-transition-type(next) {
  &::view-transition-old(root) {
    animation-name: slide-out-next;
  }

  &::view-transition-new(root) {
    animation-name: slide-in-next;
  }
}
:active-view-transition-type(previous) {
  &::view-transition-old(root) {
    animation-name: slide-out-previous;
  }

  &::view-transition-new(root) {
    animation-name: slide-in-previous;
  }
}

Reservestrategieën

Als een browser geen weergaveovergangen of weergaveovergangen tussen documenten ondersteunt, voert deze een standaard directe paginanavigatie uit. Weergaveovergangen tussen documenten zijn een progressive enhancement. De kernfunctionaliteit van de site blijft ongewijzigd.

Zo controleer je op ondersteuning in JavaScript:

if ('onpagereveal' in window) {
  // Browser supports cross-document view transitions
}

Als een browser de Navigation API niet ondersteunt, kun je deze niet gebruiken om een overgangstype te bepalen. Gebruik een alternatieve methode om het overgangstype te bepalen of voer een reserveovergangstype in. Anders voert de browser een standaard directe paginanavigatie uit.

Zo controleer je op ondersteuning in JavaScript:

if (window.navigation?.activation) {
  // Browser supports the Navigation API
}