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

API переходов между представлениями предоставляет механизм для лёгкого создания анимированных переходов между различными представлениями веб-сайта. Это включает анимацию между состояниями DOM в одностраничном приложении (SPA) и анимацию навигации между документами в многостраничном приложении (MPA).

Переходы между представлениями — популярный дизайн-приём, который снижает когнитивную нагрузку на пользователя, помогает ему оставаться в контексте и уменьшает ощущаемую задержку при переходе между состояниями или представлениями приложения.

Однако создание переходов между представлениями в веб-среде исторически было затруднено:

• Переходы между состояниями в одностраничных приложениях (SPA) обычно требуют значительных усилий по написанию CSS и JavaScript для:
  • Обработки загрузки и позиционирования старого и нового содержимого.
  • Анимации старого и нового состояний для создания перехода.
  • Предотвращения случайных пользовательских взаимодействий со старым содержимым, которые могут вызвать проблемы.
  • Удаления старого содержимого после завершения перехода. Проблемы с доступностью, такие как потеря позиции чтения, путаница с фокусом и странное поведение объявления области реального времени, также могут возникнуть из-за одновременного присутствия нового и старого содержимого в DOM.
• Переходы между представлениями разных документов (то есть между страницами в многостраничных приложениях (MPA)) исторически были невозможны.

API переходов между представлениями предоставляет простой способ обработки необходимых изменений представлений и анимации переходов для обоих вышеперечисленных случаев.

Создание перехода между представлениями, использующего стандартную анимацию браузера, очень быстро. Существуют возможности для настройки анимации перехода и управления самим переходом (например, указание условий, при которых анимация пропускается), как для переходов между представлениями SPA, так и MPA.

См. Использование API переходов между представлениями для получения дополнительной информации.

ViewTransition

Представляет переход между представлениями и предоставляет функциональность для реакции на переход в различные состояния (например, готовность к запуску анимации или завершение анимации) или пропуск перехода.

Document.startViewTransition()

Запускает новый переход между представлениями одного документа (SPA) и возвращает объект ViewTransition для его представления.

PageRevealEvent

Объект события для события pagereveal. Во время навигации между документами он позволяет изменять связанный переход между представлениями (предоставляя доступ к соответствующему объекту ViewTransition) из документа, в который происходит навигация, если навигация инициировала переход между представлениями.

PageSwapEvent

Объект события для события pageswap. Во время навигации между документами он позволяет изменять связанный переход между представлениями (предоставляя доступ к соответствующему объекту ViewTransition) из документа, из которого происходит навигация, если навигация инициировала переход между представлениями. Он также предоставляет доступ к информации о типе навигации и текущим и целевым записям истории документа.

Событие Window pagereveal

Срабатывает при первом рендеринге документа, будь то загрузка нового документа из сети или активация документа (либо из кэша назад/вперед (bfcache), либо из кэша предварительной отрисовки).

Событие Window pageswap

Срабатывает, когда документ собирается быть загружен из-за навигации.

<link rel="expect">

Определяет наиболее важное содержимое в связанном документе для начального просмотра страницы пользователем. Рендеринг документа будет заблокирован до тех пор, пока не будет обработано критическое содержимое, обеспечивая согласованную первую отрисовку — и, следовательно, переход между представлениями — во всех поддерживающих браузерах.

@view-transition

В случае навигации между документами @view-transition используется для включения перехода между представлениями текущего и целевого документов.

view-transition-name

Предоставляет выбранному элементу отдельное идентификационное имя и заставляет его участвовать в отдельном переходе между представлениями от корневого перехода — или в отсутствие перехода между представлениями, если указано значение none.

::view-transition

Корень перекрытия переходов между представлениями, содержащий все переходы и находящийся поверх всего остального содержимого страницы.

::view-transition-group()

Корень одного перехода между представлениями.

::view-transition-image-pair()

Контейнер для старого и нового представлений перехода между представлениями — до и после перехода.

::view-transition-old()

Статичный снимок старого представления до перехода.

::view-transition-new()

Актуальное представление нового представления после перехода.

• Демо SPA переходов между представлениями: Демонстрация галереи изображений с переходами между представлениями, содержащая отдельную анимацию старых и новых изображений и старых и новых подписей.
• Демо MPA переходов между представлениями: Пример сайта из двух страниц, демонстрирующий использование переходов между представлениями разных документов (MPA), предоставляющий пользовательский переход «свайп вверх» при переходе между страницами.
• HTTP 203 плейлист: Демонстрация приложения видеоплеера, содержащего несколько различных переходов между представлениями SPA, многие из которых объяснены в Гладкие переходы с помощью API переходов между представлениями.
• Список членов команды Chrome DevRel: Пример приложения профильных страниц, демонстрирующий, как использовать события pagereveal и pageswap для настройки исходящей и входящей анимации перехода между представлениями разных документов на основе URL «от» и «в».

• Гладкие переходы с помощью API View Transition на developer.chrome.com (2024)
• API View Transition: Создание плавных переходов между страницами на stackdiary.com (2023)
• API View Transitions: Одностраничные приложения без фреймворка на www.debugbear.com (2024)