Плавная навигация в стиле приложений благодаря API View Transitions в Next.js

API View Transitions позволяет браузерам анимировать переходы между состояниями DOM с использованием минимального количества пользовательских решений для анимации. В проектах Next.js App Router он естественным образом сочетается с клиентской навигацией, когда требуется сохранение целостности общих элементов вместо резких переходов.

Что это такое

Это функция браузера, которая создает снимки старого и нового состояний и интерполирует переходы между ними. Вы сами решаете, использовать её или нет, указываете названия общих элементов и при необходимости настраиваете их с помощью CSS.

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

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

Почему Next.js подходит

Переходы между маршрутами на стороне клиента уже заменяют сложные структуры представления контента. View Transitions придают этим заменам визуальный стиль, ассоциируемый у пользователей с нативными приложениями.

Поддержка браузерами и полифилы

Поддержка улучшается, но пока не является универсальной. Решите, следует ли использовать постепенное улучшение функционала или полифилы; последние увеличивают размер файла и снижают качество воспроизведения.

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

Шаблоны интеграции

Включите анимации при навигации, присвойте общим элементам стабильные имена и используйте резервное пространство, чтобы избежать скачков макета.

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

Настройка анимаций

Псевдоселекторы view-transition в CSS позволяют настраивать продолжительность и характер анимации. Лучше использовать ненавязчивые анимации; длительные анимации кажутся медленнее, чем на самом деле.

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

Сбои, стриминг, производительность

Избегайте анимации элементов, которые загружаются поздно или сильно меняют размеры. Тестируйте работу на медленных сетях. Предпочитайте свойства, подходящие для обработки в композиторе. Если происходит некорректный стриминг кадров, отложите анимацию или ограничьте её действием только на статическом слое.

Используйте переходы между вкладками, когда важна непрерывность навигации и браузеры вашей аудитории это поддерживают. Игнорируйте их, когда плотность информации меняется быстрее, чем анимация может помочь. Сохраняйте состояние элементов в активном виде, измеряйте каждый этап отдельно и не спешите с выпуском, основываясь только на интуиции, если следующая версия может снова привести к той же скрытой ошибке под новым названием. Сохраняйте состояние элементов в активном виде, измеряйте каждый этап отдельно и не спешите с выпуском, основываясь только на интуиции, если следующая версия может снова привести к той же скрытой ошибке под новым названием. Сохраняйте состояние элементов в активном виде, измеряйте каждый этап отдельно и не спешите с выпуском, основываясь только на интуиции, если следующая версия может снова привести к той же скрытой ошибке под новым названием. Сохраняйте состояние элементов в активном виде, измеряйте каждый этап отдельно и не спешите с выпуском, основываясь только на интуиции, если следующая версия может снова привести к той же скрытой ошибке под новым названием. Сохраняйте состояние элементов в активном виде, измеряйте каждый этап отдельно

Сохраняйте оборудование в рабочем состоянии, измеряйте каждый этап отдельно и не спешите с выпуском, основываясь только на интуиции, если в следующей версии может снова возникнуть тот же самый скрытый сбой под новым названием.В следующей версии можно снова ввести тот же самый скрытый режим сбоя под новым названием. Сохраняйте все компоненты в рабочем состоянии, измеряйте каждый этап отдельно и не соглашайтесь на выпуск продукта, основываясь исключительно на интуиции, когда в следующей версии можно снова ввести тот же самый скрытый режим сбоя под новым названием. Сохраняйте все компоненты в рабочем состоянии, измеряйте каждый этап отдельно и не соглашайтесь на выпуск продукта, основываясь исключительно на интуиции, когда в следующей версии можно снова ввести тот же самый скрытый режим сбоя под новым названием. Сохраняйте все компоненты в рабочем состоянии, измеряйте каждый этап отдельно и не соглашайтесь на выпуск продукта, основываясь исключительно на интуиции, когда в следующей версии можно снова ввести тот же самый скрытый режим сбоя под новым названием. Сохраняйте все компоненты в рабочем состоянии, измеряйте каждый этап отдельно и не соглашайтесь на выпуск продукта, основываясь исключительно на интуиции, когда в следующей версии можно снова ввести тот же самый скрытый режим сбоя под новым названием. Сохраняйте все компоненты в рабочем состоянии, измеряйте каждый этап отдельно и не соглашайтесь на выпуск продукта, основываясь исключительно на интуиции, когда в следующей версии можно снова ввести тот же самый скрытый режим сбоя под новым названием.Режим сбоя в беззвучном режиме под новым названием.