Когда в MPA нужна плавная смена страниц, большинство инженеров тянут React Router с анимациями или jQuery-плагины. Но браузер уже умеет это нативно, причем без единой строчки скриптов. View Transitions API — это не игрушка, а рабочая техника для лендингов, документаций и каталогов, где важен UX даже на медленных каналах.
Как работает и базовая активация
View Transitions API делает снимки старого и нового DOM-состояния, затем анимирует наложение слоев. Включение — один CSS-блок:
@view-transition { navigation: auto; }
::view-transition-old(root) {
animation: 0.35s ease-in both fade-out;
}
::view-transition-new(root) {
animation: 0.3s ease-out both fade-in;
}Браузер сам ловит момент перехода между страницами одного origin. Код минимальный, без библиотек и inline-скриптов.
Индивидуальная анимация для элементов
Типичная ошибка: перезапуск всего layout при навигации, из-за чего шапка «прыгает». Решение — задать
view-transition-name: header на <header>. Браузер анимирует этот блок отдельно от остального контента. Заголовок остается на месте, а основной блок плавно заменяется.Trade-off: не назначайте одно и то же имя разным элементам — сломанная селективность даст сбой анимации.
Production-ready: выборочные переходы и fallback
Firefox и Safari на десктопе (до 18.2) полностью игнорируют API. В продакшене обязателен fallback:
- Условия активации через
@media (prefers-reduced-motion) или :has() для разных страниц. Например, на каталоге скролл-эффект, на карточке — только fade.- Если браузер не поддерживает — страница должна загружаться мгновенно, без ошибок блокировки.
Пример для списка статей:
article { view-transition-name: entry; }. При клике на заголовок — масштабирование карточки в новую страницу, а не моргание всей вьюпорта.Практическая ловушка: cross-document с data-атрибутами
Cross-document переходы работают между разными HTML-файлами одного origin. Но если у вас ленивая загрузка изображений или динамический контент через AJAX — API может захватить неполный снимок. Всегда задавайте
view-transition-class или style="view-transition-name" явно, не полагаясь на CSS-селекторы до мутации DOM.Предупреждение: не используйте на страницах с интерактивными картами или iframe — их состояния не захватываются корректно.
Вывод: View Transitions API дает нативную, предсказуемую анимацию навигации для MPA, но требует явного задания имен, fallback для старых браузеров и отказа от декоративных эффектов на сложных виджетах.
