Transitions entre documents

Les transitions de vue entre documents vous permettent de créer des transitions fluides, semblables à celles d'une application, entre différentes pages d'une application multipage (MPA). Par défaut, le navigateur effectue un fondu enchaîné, mais vous pouvez le personnaliser pour l'adapter à l'esthétique de votre site.

Mise en œuvre, étape par étape

1. Activer les transitions de vue entre documents

Les pages source et de destination doivent toutes deux activer les transitions de vue pour que le navigateur les déclenche lors de la navigation.

/* 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. Personnaliser les animations de transition (facultatif)

Vous pouvez cibler les anciens et les nouveaux états de la transition à l'aide de pseudo-éléments pour créer des effets tels que des diapositives ou des révélations.

/* 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. Créer des transitions directionnelles (facultatif)

Vous pouvez utiliser différents effets de transition en fonction des pages entre lesquelles vous naviguez. Par exemple, lorsque vous passez d'une page d'accueil à une page de contact, vous pouvez souhaiter que le nouveau contenu apparaisse depuis la droite. Lorsque vous revenez à la page d'accueil, il n'est pas logique d'avoir le même effet.

Si la page vers laquelle vous naviguez aura toujours le même type de transition, quelle que soit la façon dont vous y accédez, vous pouvez le spécifier avec types dans la règle @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;
  }
}

Vous pouvez également spécifier de manière conditionnelle des types de transition dans un écouteur d'événements pour 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);
  }
});

Utilisez ensuite le pseudo-sélecteur :active-view-transition-type() pour appliquer les différentes animations pour chaque type.

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

Stratégies de remplacement

Si un navigateur n'est pas compatible avec les transitions de vue ou les transitions de vue entre documents, il effectue une navigation standard instantanée sur la page. Les transitions de vue entre documents sont une amélioration progressive. La fonctionnalité de base du site n'est pas affectée.

Pour vérifier la compatibilité en JavaScript :

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

Si un navigateur n'est pas compatible avec l'API Navigation, vous ne pourrez pas l'utiliser pour déterminer un type de transition. Utilisez une autre méthode pour déterminer le type de transition ou fournissez un type de transition de remplacement. Sinon, le navigateur effectuera une navigation instantanée standard sur la page.

Pour vérifier la compatibilité en JavaScript :

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