`@view-transition` CSS-правило at-rule

Правило @view-transition CSS at-rule используется, чтобы включить текущий и целевой документы в переход представления при междокументной навигации.

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

Синтаксис

@view-transition {
  navigation: auto | none;
  types: none | <custom-ident>#;
}

Дескрипторы

navigation

Ключевое слово, указывающее, как это правило повлияет на поведение переходов представления документа. Возможные значения:

auto

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

none

Документ не будет участвовать в переходе представления.

types

Задаёт типы перехода представления, которые нужно установить для активного перехода представления текущего и целевого документов. Возможные значения:

<custom-ident>+

Одно или несколько разделённых пробелами значений <custom-ident>, представляющих типы, которые нужно установить.

none

Типы не задаются.

Формальный синтаксис

Примеры

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

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

Правило @view-transition указывается в CSS как текущего, так и целевого документа навигации, чтобы включить их в переход представления:

@view-transition {
  navigation: auto;
}

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

/* Create a custom animation */
@keyframes move-out {
  from {
    transform: translateY(0%);
  }

  to {
    transform: translateY(-100%);
  }
}

@keyframes move-in {
  from {
    transform: translateY(100%);
  }

  to {
    transform: translateY(0%);
  }
}

/* Apply the custom animation to the old and new page states */
::view-transition-old(root) {
  animation: 0.4s ease-in both move-out;
}

::view-transition-new(root) {
  animation: 0.4s ease-in both move-in;
}

Посмотрите работающую демонстрацию многостраничного приложения с переходами.

Использование типов переходов представления

В нашем примере типов переходов для MPA (исходный код) показано, как использовать types с помощью @view-transition:

@view-transition {
  navigation: auto;
  types: slide;
}

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

Спецификации

Совместимость с браузерами

См. также

• ::view-transition
• ::view-transition-new()
• ::view-transition-old()
• ::view-transition-group()
• ::view-transition-image-pair()
• API переходов представления
• Использование типов переходов представления
• Правила at-rule CSS
• Функции правил at-rule CSS