Gładka nawigacja przypominająca aplikację dzięki API View Transitions w Next.js

API View Transitions umożliwia przeglądarkom animowanie przejść między stanami DOM przy mniejszej liczbie koniecznych własnych rozwiązań animacyjnych. W projektach Next.js App Router łączy się naturalnie z nawigacją po stronie klienta, gdy chce się zachować ciągłość elementów wspólnych zamiast ostrych przerw.

Czym jest

To funkcja przeglądarki, która tworzy zrzuty stanów starego i nowego oraz interpoluje pomiędzy nimi. Sam decydujesz o włączeniu tej funkcji, nadajesz nazwy elementom wspólnym i w razie potrzeby dostosowujesz je za pomocą CSS.

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

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

Dlaczego Next.js jest odpowiedni

Przejścia między trasami po stronie klienta już teraz zastępują duże drzewka widoku. View Transitions nadają temu zastąpieniu wizualny język, który użytkownicy kojarzą z aplikacjami natywnymi.

Wsparcie przeglądarek i polyfilli

Wsparcie się poprawia, ale nie jest powszechne. Musisz zdecydować, czy stosować podejście progressive-enhancement, czy używać polyfilli; polyfilli zwiększają wagę plików i powodują niepełną wierność wyświetlania.

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

Wzorce integracji

Włącz przejścia przy nawigacji, oznacz elementy udostępniane stałymi nazwami oraz zapobiegaj nagłym zmianom układu dzięki zarezerwowanemu przestrzeni.

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

Dostosowywanie ruchu

Pseudo-selektory view-transition w CSS umożliwiają dostosowanie czasu trwania i sposobu realizacji animacji. Wolno preferować subtelne ruchy; długie animacje wydają się wolniejsze, niż w rzeczywistości są.

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

Błędy, strumieniowanie, wydajność

Używaj przejść widoku, gdy ważna jest ciągłość nawigacji i przeglądarki twojej publiczności to obsługują. Pomiń je, gdy gęstość informacji zmienia się szybciej, niż animacja może pomóc. Utrzymuj elementy w stanie sprawnym, mierz każdy etap osobno i unikaj wypuszczania produktu opartego wyłącznie na intuicji, gdy następna wersja może ponownie wprowadzić ten sam niewidoczny problem pod nową nazwą. Utrzymuj elementy w stanie sprawnym, mierz każdy etap osobno i unikaj wypuszczania produktu opartego wyłącznie na intuicji, gdy następna wersja może ponownie wprowadzić ten sam niewidoczny problem pod nową nazwą. Utrzymuj elementy w stanie sprawnym, mierz każdy etap osobno i unikaj wypuszczania produktu opartego wyłącznie na intuicji, gdy następna wersja może ponownie wprowadzić ten sam niewidoczny problem pod nową nazwą. Utrzymuj elementy w stanie sprawnym, mierz każdy etap osobno i unikaj wypuszczania produktu opartego wyłącznie na intuicji, gdy następna wersja może ponownie wprowadzić ten sam niewidoczny problem pod nową nazwą. Utrzymuj elementy w stanie sprawnym, mierz każdy etap osobno.

Trzymaj urządzenia w dobrym stanie, mierz każdy etap osobno i unikaj wypuszczania produktu na podstawie jedynie intuicji, gdy kolejna wersja może ponownie wprowadzić ten sam niewidoczny problem pod nową nazwą.W następnej wersji można ponownie wprowadzić ten sam bezgłośny tryb awarii pod nową nazwą. Zachowaj testy w stanie sprawnym, mierz każdy etap oddzielnie i unikaj wypuszczania produktu opartego wyłącznie na intuicji, skoro następna wersja może ponownie wprowadzić ten sam bezgłośny tryb awarii pod nową nazwą. Zachowaj testy w stanie sprawnym, mierz każdy etap oddzielnie i unikaj wypuszczania produktu opartego wyłącznie na intuicji, skoro następna wersja może ponownie wprowadzić ten sam bezgłośny tryb awarii pod nową nazwą. Zachowaj testy w stanie sprawnym, mierz każdy etap oddzielnie i unikaj wypuszczania produktu opartego wyłącznie na intuicji, skoro następna wersja może ponownie wprowadzić ten sam bezgłośny tryb awarii pod nową nazwą. Zachowaj testy w stanie sprawnym, mierz każdy etap oddzielnie i unikaj wypuszczania produktu opartego wyłącznie na intuicji, skoro następna wersja może ponownie wprowadzić ten sam bezgłośny tryb awarii pod nową nazwą. Zachowaj testy w stanie sprawnym, mierz każdy etap oddzielnie i unikaj wypuszczania produktu opartego wyłącznie na intuicji, skoro następna wersja może ponownie wprowadzić ten sam sTryb awarii w stanie ciszy pod nową nazwą.

Literatura pokrewna

• Przejścia widoku zdolne do rozpoznawania kierunku w React z addTransitionType — Dowiedz się, jak addTransitionType oznacza przejście w React jego przyczyną, dzięki czemu ViewTransition, CSS i obsługiwanie zdarzeń mogą wybrać kierunek przesuwania bez dodatkowego stanu.
• Unikanie kumulatywnych zmian rozmiaru strony z wideo tła w Next.js — Poznaj praktyczne techniki CSS i układu, które zapobiegają temu, by wideo tła w Next.js powodowało kumulatywne zmiany rozmiaru strony na różnych urządzeniach i przy różnych prędkościach łącza.