::view-transition-group

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

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

::view-transition-group CSS псевдоэлемент представляет собой группу снимков одиночной анимации перехода.

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

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

html::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-name-selector> может быть одним из следующих значений:

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

Примеры

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

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

Спецификация
CSS View Transitions Module Level 1 # ::view-transition-group

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet	WebView Android
`::view-transition-group`	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-group