Плавные переходы с помощью 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, который использует переходы между представлениями одного и того же документа для анимации карточек по мере добавления или удаления новых.

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

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

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

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

Когда переход представления происходит между двумя разными документами, это называется переходом представления между документами . Это типично для МПА. Переходы между представлениями между документами поддерживаются в Chrome 126 и более поздних версиях.

Как вызвать

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

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

@view-transition {
  navigation: auto;
}

Пример

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

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

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

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