Создание плавных переходов между страницами с помощью View Transitions API

1. Разрыв в восприятии при переходе между страницами

В веб-разработке долгое время существовала дилемма, связанная с пользовательским опытом:

• Многостраничные приложения (MPA): Их архитектура проста и стабильна, но каждый переход вызывает полную загрузку страницы, сопровождается «белым экраном» или «вспышкой» и нарушает непрерывность взаимодействия.
• Одностраничные приложения (SPA): Фронтенд-маршрутизация обеспечивает плавную работу без перезагрузки, но разработчику приходится вручную управлять сложными анимациями переходов, состоянием и разделением кода, что повышает стоимость разработки.

Можно ли сохранить простоту MPA и одновременно получить плавные переходы SPA? View Transitions API создан именно для этого.

2. Что такое View Transitions API?

View Transitions API — нативный браузерный API, предоставляющий механизм для простого создания анимированных переходов между двумя разными состояниями DOM.

Основной процесс очень прост:

1. При запуске перехода API делает «снимок» текущей страницы (старого состояния).
2. Затем с помощью JavaScript DOM обновляется до нового состояния.
3. API также делает «снимок» новой страницы (нового состояния).
4. Наконец браузер создаёт плавный переход по умолчанию, обычно с затуханием, между «старым снимком» и «новым снимком».

Всё это эффективно обрабатывается на низком уровне браузером; нам достаточно вызвать одну простую функцию.

3. Как его использовать?

Использовать View Transitions в одностраничном приложении очень просто. Достаточно обернуть логику обновления DOM в функцию document.startViewTransition.

// 假设你有一个更新页面内容的函数
async function updatePageContent(url) {
  const response = await fetch(url);
  const newHtml = await response.text();
  // 用新内容替换旧内容 (具体实现取决于你的架构)
  document.body.innerHTML = newHtml;
}

// 在导航链接的点击事件中调用
document.querySelector('a').addEventListener('click', (event) => {
  event.preventDefault();
  const url = event.target.href;

  // 检查浏览器是否支持
  if (!document.startViewTransition) {
    updatePageContent(url); // 不支持则直接更新
    return;
  }

  // 使用 View Transition
  document.startViewTransition(() => updatePageContent(url));
});

Этого достаточно, чтобы переходы между страницами получили стандартный эффект плавного затухания!

4. Настройка анимации перехода

Стандартный эффект затухания хорош, но настоящая сила API заключается в гибкой настройке. Во время работы startViewTransition браузер создаёт структуру DOM со следующими псевдоэлементами:

• ::view-transition: Корневой элемент, содержащий весь переход.
• ::view-transition-old(root): «Снимок» старого представления.
• ::view-transition-new(root): «Снимок» нового представления.

Стандартный эффект можно переопределить с помощью CSS-свойства animation, например реализовать анимацию появления со сдвигом:

@keyframes slide-in {
  from { transform: translateX(100%); }
}

::view-transition-new(root) {
  animation: slide-in 0.5s ease-out;
}

5. «Преобразование» между элементами: view-transition-name

Самая впечатляющая возможность API — распознавать разные элементы на двух страницах как один и тот же объект и создавать между ними плавную анимацию «преобразования».

Это реализуется с помощью CSS-свойства view-transition-name.

Страница A (список):

<img src="thumbnail.jpg" style="view-transition-name: hero-image;" />

Страница B (подробности):

<img src="full-size.jpg" style="view-transition-name: hero-image;" />

При переходе со страницы A на страницу B браузер видит одинаковое значение view-transition-name у двух элементов, автоматически вычисляет различия в их положении, размере и форме и создаёт плавную анимацию вместо простого затухания. Это особенно хорошо подходит для переходов изображений, карточек и подобных элементов.

Заключение

View Transitions API приносит в Web долгожданную нативную поддержку переходов. Он значительно упрощает эффекты, для которых раньше требовались сложные JavaScript-библиотеки анимации, и как никогда облегчает создание плавного, кинематографичного опыта. По мере интеграции во фреймворки вроде Astro и Nuxt и будущего распространения в многостраничных приложениях он наверняка станет одним из стандартных навыков современного веб-разработчика.