Содержание
Коротко
View Transitions API теперь работает между отдельными HTML-документами (MPA), не только в SPA. CSS-Tricks в первой части серии собирает gotchas: устаревшие гайды, тихие фейлы и баги со снимками изображений.
Что произошло
Раньше включали через <meta name="view-transition" content="same-origin"> — устарело. Сейчас:
@view-transition {
navigation: auto;
}
Браузер анимирует переход между страницами same-origin без React/Vue. Но спека и DevTools отстают от SPA-опыта: много «почему не работает» без ошибок в консоли.
Почему это важно
| Gotcha | Суть |
|---|---|
| 4-секундный таймаут | Новая страница должна отрисоваться за ~4 с — иначе transition молча отменяется |
| Снимки картинок | Aspect ratio ломается — помогает pseudo-element + object-fit: cover |
События pageswap / pagereveal |
Единственный способ понять, сработал ли переход |
| Устаревшие туториалы | Копипаст meta-тега даёт false confidence |
Для контентных сайтов и docs это путь к «app-like» навигации без тяжёлого JS-роутера — если принять ограничения MPA.
На практике
- Проверить Chrome 126+ / актуальный Safari — фича ещё набирает покрытие.
- Добавить
@view-transition { navigation: auto; }в global CSS, не meta. - На медленных страницах — ускорить LCP или не полагаться на transition (таймаут).
- Для hero-изображений — отдельные стили snapshot через
::view-transition-old/new. - Отладка: listeners на
pagereveal+ панель Animations в DevTools.
Итог
Cross-document transitions — реальный инструмент для MPA, но не drop-in как в SPA. Серия CSS-Tricks полезна как чеклист перед продакшеном, а не как «одна строка CSS и магия».