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

::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([ <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 и предварённый точкой (.).

Примеры

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;
}

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

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

См. также

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