::view-transition-image-pair

Ограниченная доступность

Эта функция не является базовой, так как она не работает во всех широко используемых браузерах.

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

Во время перехода представления ::view-transition-image-pair включён в ассоциированное дерево псевдоэлементов, как описано в дереве псевдоэлементов перехода представления. Он всегда является дочерним элементом ::view-transition-group. В плане дочерних элементов, он может содержать ::view-transition-new или ::view-transition-old, или оба.

::view-transition-image-pair получает следующий стиль по умолчанию в таблице стилей UA:

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

Синтаксис

::view-transition-image-pair(<pt-name-selector>) {
  /* ... */
}

<pt-name-selector> может принимать следующие значения:

*: Приводит к тому, что псевдоэлемент соответствует всем группам переходов представления.
root: Приводит к тому, что псевдоэлемент соответствует стандартной группе переходов представления, созданной пользовательским агентом для содержании перехода представления для всей страницы. Эта группа включает любые элементы, не назначенные в собственную группу перехода представления с помощью свойства view-transition-name.
<custom-ident>: Приводит к тому, что псевдоэлемент соответствует определённой группе перехода представления, созданной путем назначения данного <custom-ident> элементу с помощью свойства view-transition-name.

Примеры

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

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

Спецификация
CSS Модуль переходов представления уровень 1 # ::view-transition-image-pair

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

	Рабочий стол					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`::view-transition-image-pair`	109	109	Нет	95	18	109	Нет	74	18	21.0	109

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/::view-transition-image-pair