API переходов между представлениями

Программный интерфейс переходов представлений (Chrome 111 и новее) обеспечивает плавные анимированные переходы между разными состояниями страницы или между переходами на другие страницы. Он создаёт снимки экрана до и после изменения и преобразует один в другой с помощью анимаций CSS, позволяя делать переходы в вебе похожими на переходы в приложениях.

Запустите переход внутри одной страницы, обернув обновление DOM в document.startViewTransition(() => updateDom()). Браузер сохраняет старое состояние, выполняет обновление, сохраняет новое состояние и автоматически плавно смешивает их.

Без какого-либо CSS программный интерфейс переходов представлений выполняет простое плавное смешивание между старым и новым состоянием страницы. Эта единственная строка JavaScript добавляет качественный переход, для которого раньше требовались сложная координация анимаций CSS или отдельная библиотека анимаций.

Программный интерфейс предоставляет четыре псевдоэлемента: ::view-transition (корневой слой поверх страницы), ::view-transition-old(root) (снимок старой страницы), ::view-transition-new(root) (снимок новой страницы) и ::view-transition-image-pair(root). Настраивайте их с помощью анимаций CSS.

Назначьте view-transition-name: hero-image элементу, который сохраняется во время перехода. Программный интерфейс плавно преобразует этот элемент из его старого положения и размера в новые положение и размер, автоматически создавая плавную анимацию на уровне элемента.

Переопределите плавное смешивание по умолчанию собственными ключевыми кадрами для псевдоэлементов: задайте появление справа при переходе вперёд и слева при возврате. Нацельте @keyframes на ::view-transition-new(root) и ::view-transition-old(root).

Междокументные переходы представлений (Chrome 126 и новее) анимируют переходы между полными страницами в многостраничных приложениях. Добавьте @view-transition { navigation: auto; } в CSS — браузер автоматически обработает переход между HTML-страницами, и JavaScript не понадобится.

Пользователи с нарушениями вестибулярного аппарата не должны сталкиваться с переходами, содержащими много движения. Оберните анимации переходов в @media (prefers-reduced-motion: no-preference), чтобы отключать пользовательские анимации для тех, кто предпочитает уменьшенное движение, сохраняя при этом функциональное обновление DOM.

React Router версии 6.4 и новее, Vue Router и Astro поддерживают переходы представлений. Фреймворки автоматически оборачивают изменения маршрута в startViewTransition. Настройте стили переходов для каждого маршрута с помощью свойства имени перехода представления на сохраняющихся элементах, таких как навигация и оболочки макета.

Переходы представлений создают снимки экрана страницы, что может быть затратным для сложных макетов. На больших страницах с множеством композитных слоёв во время создания снимка могут появляться рывки. Ограничивайте длительность перехода 300 миллисекундами и избегайте переходов для чрезвычайно сложных поддеревьев.

Проверяйте доступность программного интерфейса перед использованием: if (!document.startViewTransition) { updateDom(); return; }. Запасной вариант обновляет DOM обычным образом, без анимации. Переходы представлений — это прогрессивное улучшение: приложение работает и без них, а при наличии поддержки они просто делают взаимодействие удобнее.

Что позволяет свойство имени перехода представления на элементе во время перехода представления?

Программный интерфейс переходов представлений обеспечивает плавное смешивание и анимации преобразования между состояниями DOM или переходами между страницами с минимальным количеством кода. Именованные элементы перехода преобразуются автоматически, а пользовательские анимации псевдоэлементов заменяют плавное смешивание по умолчанию. Учитывайте настройку prefers-reduced-motion и используйте прогрессивное улучшение для браузеров без поддержки.