Naviguations fluides semblables à celles d’une application grâce à l’API View Transitions dans Next.js

L’API View Transitions permet aux navigateurs d’animer les transitions entre les états du DOM en nécessitant moins de code d’animation personnalisé. Dans les projets Next.js App Router, elle s’intègre naturellement aux navigations côté client lorsque l’on souhaite une continuité des éléments partagés plutôt que des coupures brutales.

Qu’est-ce que c’est ?

C’est une fonctionnalité du navigateur qui prend des captures d’écran des états anciens et nouveaux puis interprète les transitions entre eux. Vous activez cette fonctionnalité, nommez les éléments partagés, et personnalisez le tout avec du CSS si nécessaire.

function navigateWithTransition(callback: () => void) {
  if (!document.startViewTransition) {
    callback();
    return;
  }

  document.startViewTransition(() => {
    callback();
  });
}

Pourquoi Next.js convient

Les transitions de route côté client remplacent déjà de grands arbres d’affichage. View Transitions confère à ces remplacements un langage visuel que les utilisateurs associent aux applications natives.

Soutien des navigateurs et polyfills

Le soutien s’améliore mais n’est pas universel. Déterminez si vous préférez une amélioration progressive ou l’utilisation de polyfills ; ces derniers ajoutent du poids et une fidélité imparfaite.

"use client";

import { useRouter } from "next/navigation";
export function TransitionLink() {
  const router = useRouter();
  function navigate() {
    if (!document.startViewTransition) {
      router.push("/dashboard");
      return;
    }
    document.startViewTransition(() => {
      router.push("/dashboard");
    });
  }
  return (
    <button onClick={navigate}>
      Dashboard
    </button>
  );
}

Modèles d’intégration

Activez les transitions lors des navigations, identifiez les éléments partagés avec des noms stables, et évitez que les mises en page ne sautent grâce à des espaces réservés.

.product-image {
  view-transition-name: product-image;
}

Personnalisation du mouvement

Les pseudo-selecteurs view-transition de CSS vous permettent d’ajuster la durée et le déroulement des animations. Préférez des mouvements subtils ; les animations longues donnent l’impression d’être plus lentes qu’en réalité.

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 350ms;
}

::view-transition-old(root) {
  animation: fade-out 350ms ease;
}
::view-transition-new(root) {
  animation: fade-in 350ms ease;
}

Pannes, streaming, performances

Évitez d’animer les éléments qui s’affichent en retard ou dont la taille change fortement. Testez sur des réseaux lents. Préférez les propriétés adaptées au composant graphique. Si des captures non alignées sont transmises en streaming, retardez la transition ou restreignez-la au chrome statique.

Utilisez les transitions d’affichage lorsque la continuité de la navigation est importante et que les navigateurs de votre public le permettent. Évitez-les lorsque la densité des informations évolue plus rapidement que l’animation ne peut l’aider. Maintenez les éléments fonctionnels opérationnels, mesurez chaque étape séparément, et refusez de livrer en vous fiant uniquement à l’intuition lorsque la prochaine version peut réintroduire le même mode de défaillance silencieux sous un nouveau nom. Maintenez les éléments fonctionnels opérationnels, mesurez chaque étape séparément, et refusez de livrer en vous fiant uniquement à l’intuition lorsque la prochaine version peut réintroduire le même mode de défaillance silencieux sous un nouveau nom. Maintenez les éléments fonctionnels opérationnels, mesurez chaque étape séparément, et refusez de livrer en vous fiant uniquement à l’intuition lorsque la prochaine version peut réintroduire le même mode de défaillance silencieux sous un nouveau nom. Maintenez les éléments fonctionnels opérationnels, mesurez chaque étape séparément, et refusez de livrer en vous fiant uniquement à l’intuition lorsque la prochaine version peut réintroduire le même mode de défaillance silencieux sous un nouveau nom. Maintenez les éléments fonctionnels opérationnels, mesurez chaque étape séparément.

Maintenez les équipements en bon état, mesurez chaque étape séparément, et refusez de livrer en vous fiant uniquement à votre intuition lorsque la prochaine version peut réintroduire le même mode de défaillance silencieux sous un nouveau nom.La prochaine version peut réintroduire le même mode de défaillance silencieux sous un nouveau nom. Gardez les outils en bon état, mesurez chaque étape séparément, et refusez de livrer en vous fiant uniquement à votre intuition lorsque la prochaine version peut réintroduire le même mode de défaillance silencieux sous un nouveau nom. Gardez les outils en bon état, mesurez chaque étape séparément, et refusez de livrer en vous fiant uniquement à votre intuition lorsque la prochaine version peut réintroduire le même mode de défaillance silencieux sous un nouveau nom. Gardez les outils en bon état, mesurez chaque étape séparément, et refusez de livrer en vous fiant uniquement à votre intuition lorsque la prochaine version peut réintroduire le même mode de défaillance silencieux sous un nouveau nom. Gardez les outils en bon état, mesurez chaque étape séparément, et refusez de livrer en vous fiant uniquement à votre intuition lorsque la prochaine version peut réintroduire le même mode de défaillance silencieux sous un nouveau nom. Gardez les outils en bon état, mesurez chaque étape séparément, et refusez de livrer en vous fiant uniquement à votre intuition lorsque la prochaine version peut réintroduire le même sCe mode de défaillance silencieux est désormais identifié sous un nouveau nom.