Flüssige, appähnliche Navigation mit der View Transitions API in Next.js

Die View Transitions API ermöglicht es Browsern, zwischen DOM-Zuständen mit weniger eigenständiger Animationslogik zu wechseln. In Next.js App Router-Projekten passt sie sich nahtlos an clientseitige Navigationen an, wenn man eine Kontinuität der gemeinsam genutzten Elemente statt harter Schnitte wünscht.

Was es ist

Eine Browserfunktion, die alte und neue Zustände abbildet und zwischen ihnen interpoliert. Man aktiviert sie, benennt die gemeinsam genutzten Elemente und passt sie bei Bedarf mit CSS an.

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

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

Warum Next.js geeignet ist

Clientseitige Route-Übergänge ersetzen bereits große Ansichtsbäume. View Transitions verleihen diesem Ersatz eine visuelle Sprache, die Nutzer mit nativen Apps in Verbindung bringen.

Browserunterstützung und Polyfills

Die Unterstützung verbessert sich, ist aber noch nicht universell verfügbar. Entscheiden Sie sich entweder für progressive Enhancement oder Polyfills; Polyfills erhöhen das Gewicht und führen zu einer unvollkommenen Genauigkeit.

"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>
  );
}

Integrationsmuster

Aktivieren Sie Übergänge bei Navigierungen, kennzeichnen Sie gemeinsam genutzte Elemente mit stabilen Namen und verhindern Sie, dass die Layouts durch reservierten Platz springen.

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

Anpassung der Animation

CSS-View-Transition-Pseudo-Selektoren ermöglichen es Ihnen, Dauer und Verlaufsart anzupassen. Wählen Sie subtile Animationen – lange Animierungen wirken langsamer, als sie tatsächlich sind.

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

Fehler, Streaming, Leistung

Vermeiden Sie es, Elemente zu animieren, die spät gestreamt werden oder stark in ihrer Größe geändert werden. Testen Sie Netzwerke mit geringer Geschwindigkeit. Wählen Sie Eigenschaften, die für den Kompositor geeignet sind. Falls gestreamte Snapshots nicht korrekt ausgerichtet sind, verzögern Sie den Übergang oder beschränken Sie ihn auf statisches Chrome.

Verwenden Sie Ansichtsübergänge, wenn die Kontinuität der Navigation wichtig ist und die Browser Ihrer Zielgruppe dies unterstützen. Vermeiden Sie sie, wenn sich die Informationsdichte schneller ändert, als Animationen helfen können. Halten Sie die Komponenten in einem funktionierenden Zustand, messen Sie jede Phase separat und weigern Sie sich, allein auf Intuitionen zu vertrauen, wenn die nächste Version denselben stillen Fehlermodus unter einem neuen Namen wieder einführen könnte. Halten Sie die Komponenten in einem funktionierenden Zustand, messen Sie jede Phase separat und weigern Sie sich, allein auf Intuitionen zu vertrauen, wenn die nächste Version denselben stillen Fehlermodus unter einem neuen Namen wieder einführen könnte. Halten Sie die Komponenten in einem funktionierenden Zustand, messen Sie jede Phase separat und weigern Sie sich, allein auf Intuitionen zu vertrauen, wenn die nächste Version denselben stillen Fehlermodus unter einem neuen Namen wieder einführen könnte. Halten Sie die Komponenten in einem funktionierenden Zustand, messen Sie jede Phase separat und weigern Sie sich, allein auf Intuitionen zu vertrauen, wenn die nächste Version denselben stillen Fehlermodus unter einem neuen Namen wieder einführen könnte. Halten Sie die Komponenten in einem funktionierenden Zustand, messen Sie jede Phase separat.

Halten Sie die Prüfgeräte in gutem Zustand, messen Sie jede Stufe getrennt voneinander und weigern Sie sich, allein auf Intuitionen zu vertrauen, wenn die nächste Version denselben stillen Fehlermodus unter einem neuen Namen wieder einführen kann.In der nächsten Version kann derselbe stille Fehlermodus unter einem neuen Namen wieder eingeführt werden. Halten Sie die Testumgebungen in Ordnung, messen Sie jede Phase getrennt voneinander und weigern Sie sich, allein auf Intuitionen hin etwas zu veröffentlichen, wenn die nächste Version denselben stille Fehlermodus unter einem neuen Namen wieder einführen kann. Halten Sie die Testumgebungen in Ordnung, messen Sie jede Phase getrennt voneinander und weigern Sie sich, allein auf Intuitionen hin etwas zu veröffentlichen, wenn die nächste Version denselben stille Fehlermodus unter einem neuen Namen wieder einführen kann. Halten Sie die Testumgebungen in Ordnung, messen Sie jede Phase getrennt voneinander und weigern Sie sich, allein auf Intuitionen hin etwas zu veröffentlichen, wenn die nächste Version denselben stille Fehlermodus unter einem neuen Namen wieder einführen kann. Halten Sie die Testumgebungen in Ordnung, messen Sie jede Phase getrennt voneinander und weigern Sie sich, allein auf Intuitionen hin etwas zu veröffentlichen, wenn die nächste Version denselben stille Fehlermodus unter einem neuen Namen wieder einführen kann. Halten Sie die Testumgebungen in Ordnung, messen Sie jede Phase getrennt voneinander und weigern Sie sich, allein auf Intuitionen hin etwas zu veröffentlichen, wenn die nächste Version denselben sStiller Ausfallmodus unter einem neuen Namen.