::view-transition-old

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

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

Псевдоэлемент ::view-transition-old CSS псевдоэлемента представляет собой "старое" состояние отображения при переходе — статичный снимок старого отображения до начала перехода.

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

Это заменяемый элемент, и поэтому его можно манипулировать такими свойствами, как object-fit и object-position. Он имеет естественные размеры, равные размеру содержимого.

В таблице стилей UA включены следующие стили по умолчанию:

:root::view-transition-old(*),
:root::view-transition-new(*) {
  position: absolute;
  inset-block-start: 0;
  inline-size: 100%;
  block-size: auto;

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

/* Keyframes for blending when there are 2 images */
@keyframes -ua-mix-blend-mode-plus-lighter {
  from {
    mix-blend-mode: plus-lighter;
  }
  to {
    mix-blend-mode: plus-lighter;
  }
}

@keyframes -ua-view-transition-fade-out {
  to {
    opacity: 0;
  }
}

Примечание: Дополнительные стили перехода отображения также настраивают анимацию ::view-transition-old. Они динамически генерируются во время перехода отображения; для получения более подробной информации см. разделы настройка псевдоэлементов перехода и обновление стилей псевдоэлементов.

Синтаксис

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

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

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

Примеры

figcaption {
  view-transition-name: figure-caption;
}

@keyframes grow-x {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

@keyframes shrink-x {
  from {
    transform: scaleX(1);
  }
  to {
    transform: scaleX(0);
  }
}

::view-transition-old(figure-caption),
::view-transition-new(figure-caption) {
  height: auto;
  right: 0;
  left: auto;
  transform-origin: right center;
}

::view-transition-old(figure-caption) {
  animation: 0.25s linear both shrink-x;
}

::view-transition-new(figure-caption) {
  animation: 0.25s 0.25s linear both grow-x;
}

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

Спецификация
Модуль CSS View Transitions уровня 1 # ::view-transition-old

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

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