WebTolkRu

Нативный View Transitions API

Анимация перехода между страницами (или состояниями приложения) всегда была болью. Чтобы картинка из карточки товара плавно перелетела на страницу деталей, мы тянули тяжелые framer-motion, react-spring и писали горы логики, чтобы держать старый DOM-узел живым во время анимации.

Теперь это делает сам браузер на уровне движка с помощью View Transitions API.

В чем суть?
Когда вы вызываете API, браузер буквально делает скриншот текущего состояния, замораживает его, дает вам обновить DOM, делает скриншот нового состояния и автоматически создает CSS-анимацию (по умолчанию crossfade) между этими двумя «кадрами».

🚀 Как это выглядит в коде (SPA):

Вместо синхронного изменения стейта оборачиваем апдейт в один метод:


// Функция, которая меняет DOM (например, рендер нового роута)
function updatePage() {
  renderNewRoute();
}

// ❌ Как было:
// updatePage();

// ✅ Как теперь:
if (!document.startViewTransition) {
  updatePage(); // Фолбэк для старых браузеров
} else {
  // Браузер сам создаст плавный переход
  document.startViewTransition(() => updatePage());
}

🧠 Senior-уровень: Анимация конкретных элементов

Дефолтный crossfade всей страницы это скучно. Самое крутое, это Hero-анимации (когда элемент перелетает на новое место с изменением размера).

Чтобы браузер понял, что маленькая аватарка в списке и большая аватарка в профиле - это один и тот же элемент, им просто нужно дать одинаковое CSS-свойство view-transition-name:


/* На странице списка */
.user-avatar-small {
  view-transition-name: user-avatar;
}

/* На странице профиля (после апдейта DOM) */
.user-avatar-large {
  view-transition-name: user-avatar;
}

Всё! При вызове startViewTransition браузер сам рассчитает траекторию, скейл и плавно переместит аватарку.

🔥 А что с классическими многостраничниками (MPA)?
Это самая бомба. Chrome уже поддерживает кросс-документные переходы (между реальными HTML-страницами вашего сайта). Не нужно никакого JS!

Просто добавляем в CSS:


@view-transition {
  navigation: auto;
}

И страницы начнут плавно перетекать друг в друга при клике на обычные ссылки <a href="...">.

📲 Мы в MAX

👉 @frontend_1

❤4

68 viewsSergey Tolkachyov, 06:37