View Transitions API: плавные переходы между страницами без фреймворка

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

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

Как устроен учебный проект View Transitions API

Браузер делает снимок старого состояния, выполняет навигацию или обновление DOM, затем анимирует псевдоэлементы старого и нового снимка. Держите ввод, логику и отображение раздельно: тогда каждый этап можно проверить отдельно.

Контрольные точки: разметка, включение, связь и доступность. Следующий шаг начинается после совпадения с ожидаемым результатом.

От входных данных до видимого результата. Сначала проверяется вход, затем действие и только потом интерфейс.

Собираем рабочий пример шаг за шагом

Пример сверялся с актуальной документацией MDN View Transition API на 19 октября 2026 года. Создайте два HTML-файла и откройте их через локальный сервер, например npx serve. Переходы между file:// не являются надёжным тестом. Проверьте текущую папку через pwd или Get-Location. Вставьте пример целиком, выполните один раз, затем разбирайте по частям.

@view-transition {
  navigation: auto;
}

.course-card[data-id="python"] {
  view-transition-name: course-python;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 260ms;
  animation-timing-function: ease-out;
}

::view-transition-group(course-python) {
  animation-duration: 420ms;
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*) {
    animation-duration: 1ms;
  }
}

Директива включает переходы навигации, а view-transition-name связывает конкретный визуальный объект между состояниями. Найдите в примере вход, проверку и место формирования результата.

Что отличает устойчивый проект от случайного запуска. Явные границы делают ошибку локальной и понятной.

Что происходит внутри и почему это работает

Во время перехода браузер рисует специальные псевдоэлементы ::view-transition-old и ::view-transition-new. Реальный DOM уже обновляется, а пользователь видит анимацию снимков. Логику держите отдельно от вывода: функция получает аргумент и возвращает значение, а интерфейс показывает его. Имена должны быть уникальны в одном состоянии. Если два видимых элемента получают одинаковый view-transition-name, переход может быть пропущен.

Не анимируйте все элементы сразу. Сильнее работает один общий объект и спокойный переход фона. Длинные задержки заставляют интерфейс казаться медленным. Для навигации обычно достаточно 180-420 мс, но проверяйте ощущение на реальном устройстве и при возврате назад. Не прячьте поток в одном обработчике: сохраните вход, проверьте его, вызовите операцию и только затем обновите интерфейс.

Проверяем проект и добавляем свою функцию

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

Переход должен объяснять связь экранов, а не задерживать пользователя ради эффекта. Полезная правка проходит от нового ввода до видимого результата.

Четыре проверки перед следующим шагом. Каждый следующий этап начинается после наблюдаемого результата.

Что запомнить и куда двигаться дальше

Проверьте прямое открытие URL, Назад/Вперёд, reduced motion и браузер без поддержки. Если все сценарии работают без анимации, enhancement сделан правильно. Для закрепления откройте в статье про тёмную тему, в доступном бургер-меню и в PWA на JavaScript.

Как изучить тему в Кодике

Начните с CSS-псевдоэлементов и навигации, а затем переходите к программному document.startViewTransition. Сначала восстановите главную функцию и проверьте её на трёх значениях.

Попробуйте описать, что именно сообщает движение. Если ответа нет, эффект можно убрать. Базовый синтаксис закрепите через курс CSS.

Что получится в итоге

Так выглядит законченный учебный проект: есть понятный вход, видимый результат, защита от неверных данных и место для следующего улучшения.