API View Transitions: плавные изменения страниц и состояний в браузере
Что делает View Transitions API, как работают переходы между одним и тем же документом и между документами, как их стилизовать с помощью CSS и как их ответственно использовать.
Главное
API View Transitions позволяет браузеру анимировать между двумя состояниями страницы. Вызовите document.startViewTransition() с функцией, которая обновляет DOM, и браузер делает снимки старого и нового представлений и анимирует их между собой, которые вы можете стилизовать с помощью псевдоэлементов ::view-transition. Он работает в одностраничных приложениях и, в поддерживаемых браузерах, при навигации по страницам.
Как это работает
MDN описывает document.startViewTransition() как запуск перехода представления одного и того же документа, типичного для одностраничных приложений. Браузер захватывает текущее представление, запускает ваше обновление, захватывает новое представление и выполняет анимацию между ними. По умолчанию это перекрестное затухание; CSS позволяет вам изменить его.
Один и тот же документ и перекрестный документ
Переходы между одним и тем же документом выполняются внутри одной страницы, как в SPA, и Chrome поддерживает их, начиная с Chrome 111. Переходы между документами анимируются между отдельными страницами на многостраничных сайтах, что, как отмечает MDN, исторически было невозможно; они используют события Pageswap и Pagereveal, а также подписку на CSS. Поддержка браузеров в этих двух браузерах различается, поэтому проверьте текущие таблицы совместимости.
Стилизация перехода
Большая часть настроек проста: CSS:
- Присвойте элементу имя-перехода-просмотра, чтобы анимировать его отдельно от остальной части страницы, например миниатюру, превращающуюся в главное изображение.
- Используйте ::view-transition-old() и ::view-transition-new() для настройки анимации.
- Длительность должна быть короткой, а движения осмысленными.
- Оберните пользовательские анимации в проверки предпочтения уменьшенного движения.
Прогрессивное улучшение
Всегда проверяйте поддержку перед вызовом API и обновляйте DOM напрямую, если он отсутствует. Страница должна работать идентично без анимации. Избегайте длинных переходов в навигации, из-за которых весь сайт работает медленнее.
Пример реализации для продакшена
// Same-document transition with a safe fallback
function navigate(updateDom) {
const reduce = matchMedia('(prefers-reduced-motion: reduce)').matches;
if (!document.startViewTransition || reduce) {
updateDom();
return;
}
document.startViewTransition(() => updateDom());
}
/* CSS: animate one element on its own */
.product-image { view-transition-name: product-image; }
::view-transition-old(root),
::view-transition-new(root) {
animation-duration: 200ms;
}Ключевые принципы
- startViewTransition() делает снимки старых и новых представлений и анимирует их между собой.
- Существуют варианты для одного документа (SPA) и нескольких документов (многостраничные).
- Стиль с псевдоэлементами view-transition-name и ::view-transition.
- Проверьте поддержку и вернитесь к мгновенному обновлению.
- Делайте переходы короткими и соблюдайте ограниченное движение.
Частые вопросы
Источники
- View Transition API — MDN Веб-документы
- Smooth transitions with the View Transition API — Chrome для разработчиков