06.03.2026 06:12
Нативный View Transitions API Анимация перехода между страницами (или состояниями приложения) всегда была болью. Чтобы
Нативный 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="...">.
👉 @frontend_1
Анимация перехода между страницами (или состояниями приложения) всегда была болью. Чтобы картинка из карточки товара плавно перелетела на страницу деталей, мы тянули тяжелые 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="...">.
👉 @frontend_1