`::view-transition-image-pair()` CSS-псевдоэлемент

::view-transition-image-pair() — это CSS-псевдоэлемент, представляющий контейнер для «старого» и «нового» состояний представления в переходе представления — до и после перехода.

Во время перехода представления ::view-transition-image-pair() включается в соответствующее дерево псевдоэлементов, как описано в разделе Дерево псевдоэлементов перехода представления. Он всегда является дочерним элементом ::view-transition-group(). Среди его дочерних элементов может быть ::view-transition-new() или ::view-transition-old(), либо оба.

Для ::view-transition-image-pair() в таблице стилей пользовательского агента заданы следующие стили по умолчанию:

:root::view-transition-image-pair(*) {
  position: absolute;
  inset: 0;

  animation-duration: inherit;
  animation-fill-mode: inherit;
  animation-delay: inherit;
}

Во время перехода представления для ::view-transition-image-pair() в таблице стилей перехода представления задаётся значение isolation: isolate, чтобы его дочерние элементы можно было смешивать с помощью режимов наложения, отличных от normal, не затрагивая другие визуальные результаты.

Синтаксис

::view-transition-image-pair([ <pt-name-selector> <pt-class-selector>? ] | <pt-class-selector>) {
  /* ... */
}

Параметры

*

Универсальный селектор (*); выбирает все группы перехода представления на странице.

root

Заставляет псевдоэлемент соответствовать группе снимков перехода представления по умолчанию root, создаваемой пользовательским агентом для размещения перехода представления всей страницы. Эта группа включает любой элемент, которому не назначена отдельная группа снимков перехода представления с помощью свойства view-transition-name.

<pt-name-selector>

<custom-ident>, заданный в качестве значения свойства view-transition-name.

<pt-class-selector>

<custom-ident>, заданный в качестве значения свойства view-transition-class и предварённый точкой (.).

Примеры

::view-transition-image-pair(root) {
  isolation: auto;
}

::view-transition-image-pair(.card) {
  isolation: isolate;
}

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

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

См. также

• API переходов представления
• Плавные переходы с помощью API переходов представления