Плавные переходы с помощью View Transition API

Bramus

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

Типичные ситуации, в которых следует использовать переходы между видами:

• Миниатюрное изображение на странице со списком товаров, которое преобразуется в полноразмерное изображение товара на странице сведений о товаре.
• Фиксированная панель навигации, которая остается на месте при переходе с одной страницы на другую.
• Сетка, позиции элементов которой меняются по мере фильтрации.

Реализовать переходы между видами

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

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

1. Браузер делает снимки старого и нового состояний.
2. DOM обновляется, а рендеринг подавляется.
3. Переходы осуществляются с помощью CSS-анимации.

Единственное, что отличает оба типа, — это то, как вы их запускаете.

Переходы между представлениями одного и того же документа

Переход между представлениями выполняется для одного документа, что называется переходом между представлениями в пределах одного документа . Это обычно происходит в одностраничных приложениях (SPA). Переходы между представлениями в пределах одного документа поддерживаются в Chrome, начиная с версии Chrome 111.

Как вызвать

Запустите переходы между представлениями одного документа, вызвав document.startViewTransition :

function handleClick(e) {
  // Fallback for browsers that don't support this API:
  if (!document.startViewTransition) {
    updateTheDOMSomehow();
    return;
  }

  // With a View Transition:
  document.startViewTransition(>() = updateTheDOMSomehow());
}

Пример

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

Начать строительство

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

Создание переходов между представлениями одного и того же документа

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

Переход между двумя разными документами называется междокументным переходом . Это типично для многодокументных объектов (MPA). Междокументные переходы поддерживаются в Chrome 126 и более поздних версиях.

Как вызвать

Переходы между представлениями между документами запускаются при навигации между документами из одного источника, если обе страницы согласны на это. Другими словами, API для запуска перехода между представлениями между документами не существует. Когда пользователь нажимает на ссылку, этот щелчок запускает переход между представлениями.

Чтобы подписаться, используйте следующий фрагмент CSS:

@view-transition {
  navigation: auto;
}

Пример

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

Начать строительство

Узнайте все, что нужно знать о переходах между представлениями документов.

Создавайте переходы между представлениями документов