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

::view-transition-group() — это CSS-псевдоэлемент, представляющий собой отдельную группу снимков перехода между состояниями интерфейса.

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

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

:root::view-transition-group(*) {
  position: absolute;
  top: 0;
  left: 0;

  animation-duration: 0.25s;
  animation-fill-mode: both;
}

По умолчанию выбранные элементы изначально повторяют размер и положение псевдоэлемента ::view-transition-old(), представляющего «старое» состояние интерфейса, либо псевдоэлемента ::view-transition-new(), представляющего «новое» состояние интерфейса, если «старого» состояния нет.

Если существуют и «старое», и «новое» состояния интерфейса, стили в таблице стилей перехода между состояниями интерфейса анимируют width и height этого псевдоэлемента, изменяя их от размеров рамки «старого» состояния до размеров рамки «нового» состояния.

Кроме того, преобразование элемента анимируется от преобразования в экранном пространстве «старого» состояния интерфейса до преобразования в экранном пространстве «нового» состояния. Этот стиль генерируется динамически, поскольку значения анимируемых свойств определяются в момент начала перехода.

Синтаксис

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

Параметры

*

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

root

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

<pt-name-selector>

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

<pt-class-selector>

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

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

Примеры

::view-transition-group(embed-container) {
  animation-duration: 0.3s;
  animation-timing-function: ease;
  z-index: 1;
}

::view-transition-group(.card) {
  animation-duration: 1s;
}

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

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

См. также

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