Переходы между документами

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

Руководство по настройке

1. Включите переходы между представлениями между документами

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

/* Respect user's preference for reduced motion */
@media (prefers-reduced-motion: no-preference) {
  /* Add to a global stylesheet shared by both pages */
  @view-transition {
    /* Enables transitions for same-origin navigations */
    navigation: auto;
  }
}

2. Настройка анимации перехода (необязательно)

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

/* Customizing the outgoing page animation */
::view-transition-old(root) {
  /* Move the old page out to the left */
  animation: 0.4s ease-in both slide-out;
}

/* Customizing the incoming page animation */
::view-transition-new(root) {
  /* Move the new page in from the right */
  animation: 0.4s ease-out both slide-in;
}

@keyframes slide-out {
  to { transform: translateX(-20%); opacity: 0; }
}

@keyframes slide-in {
  from { transform: translateX(100%); }
}

3. Как создать направленные переходы (необязательно)

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

Если на странице, на которую вы переходите, всегда будет один и тот же тип перехода, независимо от того, как вы на нее попали, вы можете указать его с помощью types в правиле @view-transition.

@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
    /* Specify the types of view transitions that will always be used on this page. */
    types: previous;
  }
}

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

window.addEventListener("pagereveal", async (e) => {
  if (e.viewTransition && window.navigation?.activation) {
    // Use application-specific logic to compute a transition type
     const transitionType = yourTransitionTypeLogic(navigation.activation.from, navigation.activation.entry);
    e.viewTransition.types.add(transitionType);
  }
});

Затем используйте псевдоселектор :active-view-transition-type(), чтобы применить разные анимации для каждого типа.

:active-view-transition-type(next) {
  &::view-transition-old(root) {
    animation-name: slide-out-next;
  }

  &::view-transition-new(root) {
    animation-name: slide-in-next;
  }
}
:active-view-transition-type(previous) {
  &::view-transition-old(root) {
    animation-name: slide-out-previous;
  }

  &::view-transition-new(root) {
    animation-name: slide-in-previous;
  }
}

Резервные стратегии

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

Чтобы проверить поддержку в JavaScript:

if ('onpagereveal' in window) {
  // Browser supports cross-document view transitions
}

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

Чтобы проверить поддержку в JavaScript:

if (window.navigation?.activation) {
  // Browser supports the Navigation API
}