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

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

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

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

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

: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-in {
  from {
    opacity: 0;
  }
}

Синтаксис

::view-transition-new([ <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 переходов между представлениями