CSS-свойство `view-transition-name`

CSS-свойство view-transition-name задаёт снимок перехода представления, в котором будут участвовать выбранные элементы. Это позволяет анимировать эти элементы отдельно от остальной части страницы, для которой во время перехода представления используется стандартная анимация перекрёстного затухания. Затем для этих элементов можно определить пользовательские стили анимации.

Синтаксис

/* <custom-ident> value examples */
view-transition-name: header;
view-transition-name: figure-caption;

/* Keyword value */
view-transition-name: none;
view-transition-name: match-element;

/* Global values */
view-transition-name: inherit;
view-transition-name: initial;
view-transition-name: revert;
view-transition-name: revert-layer;
view-transition-name: unset;

Значения

<custom-ident>

Имя-идентификатор, которое заставляет выбранный элемент участвовать в отдельном снимке, не входящем в корневой снимок. Значение <custom-ident> не может быть auto, match-element, none или ключевым словом CSS-wide.

match-element

Браузер автоматически назначает выбранному элементу уникальное имя. Это имя используется, чтобы создать отдельный снимок элемента, не включающий другие элементы страницы. (Это имя является внутренним и не может быть прочитано из DOM.)

none

Выбранный элемент не будет участвовать в отдельном снимке, если только у него нет родительского элемента со значением view-transition-name; в таком случае он будет включён в снимок этого элемента.

Описание

По умолчанию при применении перехода представления к веб-приложению все изменения интерфейса, происходящие во время перехода, объединяются в один снимок и анимируются вместе. Это снимок по умолчанию — или root (см. раздел Дерево псевдоэлементов перехода представления). По умолчанию используется плавное перекрёстное затухание; его можно увидеть в действии в демонстрации переходов представления в SPA.

Если во время перехода представления нужно анимировать некоторые элементы иначе, чем в снимке root, можно задать им другое значение view-transition-name, например:

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

Затем можно указать анимацию для снимков до и после перехода с помощью соответствующих псевдоэлементов перехода представления — ::view-transition-old() и ::view-transition-new(). Например:

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

Если не нужно создавать для элемента отдельный снимок, можно задать ему значение none свойства view-transition-name:

.dont-animate-me {
  view-transition-name: none;
}

Значение <custom-ident> свойства view-transition-name должно быть уникальным для каждого отображаемого элемента, участвующего в переходе представления. Если два отображаемых элемента одновременно имеют одинаковое значение view-transition-name, объект ViewTransition.ready Promise будет отклонён, а переход пропущен.

Автоматическое задание значений view-transition-name

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

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>

  <!-- ... -->

  <li>Item 99</li>
</ul>

Назначать каждому элементу уникальное имя может быть неудобно, особенно если количество элементов велико:

li:nth-child(1) {
  view-transition-name: item1;
}
li:nth-child(2) {
  view-transition-name: item2;
}
li:nth-child(3) {
  view-transition-name: item3;
}
li:nth-child(4) {
  view-transition-name: item4;
}

/* ... */

li:nth-child(99) {
  view-transition-name: item99;
}

Чтобы решить эту проблему, можно использовать значение match-element: оно заставляет браузер присваивать каждому выбранному элементу уникальный внутренний идентификатор view-transition-name:

li {
  view-transition-name: match-element;
}

Поскольку match-element автоматически назначает значения view-transition-name на основе идентичности элемента, его можно использовать только для переходов представления в пределах одного документа. Автоматически созданные внутренние идентификаторы нельзя перенести на другие элементы или документы.

Формальное определение

Формальный синтаксис

view-transition-name = 
  none |
  <custom-ident> |
  match-element

Примеры

Основы использования view-transition-name

Этот пример взят из демонстрации переходов представления в SPA — простой галереи изображений. В разделе Базовый переход представления в SPA подробнее объясняется, как работает эта демонстрация.

Большинство изменений интерфейса анимируется с помощью снимка перехода root. Однако для <figcaption> задано значение figure-caption свойства view-transition-name, чтобы анимировать его иначе, чем остальную часть страницы:

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

Следующий код применяет пользовательскую анимацию только к <figcaption>:

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

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

::view-transition-group(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-transition-old(figure-caption) и ::view-transition-new(figure-caption). Также мы задаём дополнительные стили, чтобы оба элемента оставались в одном месте, а стили по умолчанию не мешали пользовательским анимациям.

Использование значения match-element

В этом примере показан список технологий — HTML, CSS, SVG и JS — в боковой панели рядом с основной областью содержимого, которая изначально пуста. Щелчок по заголовку технологии анимирует её содержимое, перемещая его в соседнюю область содержимого с дополнительной информацией.

HTML

Элемент <main> содержит ненумерованный список и элемент <article>. Каждый из нескольких дочерних элементов <li> внутри списка содержит элемент <a>, помещённый внутрь заголовка.

<main class="match-element-applied">
  <ul>
    <li>
      <h2><a href="#">HTML</a></h2>
      <h3>HyperText Markup Language</h3>
      <p>
        HyperText Markup Language (HTML) is the most basic building block of the
        web. It defines the meaning and structure of web content. HTML provides
        the fundamental building blocks for structuring web documents and apps.
      </p>
    </li>
    <li>
      <h2><a href="#">CSS</a></h2>
      <h3>Cascading Style Sheets</h3>
      <p>
        Cascading Style Sheets (CSS) is a stylesheet language used to describe
        the presentation of a document written in HTML or XML (including XML
        dialects such as SVG, MathML or XHTML). CSS describes how elements
        should be rendered on screen, on paper, in speech, or on other media.
      </p>
    </li>
    <li>
      <h2><a href="#">SVG</a></h2>
      <h3>Scalable Vector Graphics</h3>
      <p>
        Scalable Vector Graphics (SVG) is an XML-based markup language for
        describing two-dimensional based vector graphics.
      </p>
    </li>
    <li>
      <h2><a href="#">JS</a></h2>
      <h3>JavaScript</h3>
      <p>
        JavaScript (JS) is the web's native programming language. JavaScript is
        a lightweight, interpreted (or just-in-time compiled) programming
        language with first-class functions. While it is most well-known as the
        scripting language for web pages, many non-browser environments, such as
        Node.js, also use it.
      </p>
    </li>
  </ul>
  <article></article>
</main>

<form>
  <label for="match-element-checkbox">
    Apply <code>match-element</code> to list items?
  </label>
  <input type="checkbox" id="match-element-checkbox" checked />
</form>

CSS

Мы используем flexbox, чтобы расположить <li> и <article> рядом друг с другом и распределить пространство между элементами списка в первом столбце поровну. Список занимает 35% ширины контейнера, а <article> заполняет оставшееся горизонтальное пространство.

/* General styles and resets */
* {
  box-sizing: border-box;
  font-size: 0.9rem;
}

html {
  font-family: "Helvetica", "Arial", sans-serif;
  height: 100%;
}

body {
  margin: 0;
  height: inherit;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
li h2 {
  margin: 0;
}

ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
}

li {
  overflow: hidden;
  container-type: inline-size;
}

li p {
  display: none;
}

li.active-item p {
  display: block;
}

li:nth-child(1) {
  background-color: #cbc0d3;
  border: 20px solid #cbc0d3;
}

li:nth-child(2) {
  background-color: #efd3d7;
  border: 20px solid #efd3d7;
}

li:nth-child(3) {
  background-color: #feeafa;
  border: 20px solid #feeafa;
}

li:nth-child(4) {
  background-color: #dee2ff;
  border: 20px solid #dee2ff;
}

/* Links */

a {
  text-decoration: none;
  color: rgb(0 0 255 / 0.8);
}

a:hover,
a:focus {
  color: rgb(100 100 255);
}

/* Form and checkbox styles */
form {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 2;
  background-color: white;
  padding: 10px;
  border: 1px solid black;
}

main {
  container-type: inline-size;
  width: 100%;
  height: 100%;
  display: flex;
  gap: 2cqw;
  position: relative;
}

ul {
  width: 35cqw;
  display: flex;
  flex-direction: column;
  gap: 1cqw;
}

article {
  flex: 1;
}

li {
  flex: 1;
}

Также мы задаём правило, выбирающее элементы с классом active-item. Когда этот класс применяется к элементу, правило размещает его точно поверх элемента <article>. Этот класс будет назначен элементам списка с помощью JavaScript при щелчке по ссылкам, что запустит переход представления.

.active-item {
  position: absolute;
  z-index: 1;
  translate: 37cqw;
  width: calc(100% - 37cqw);
  height: 100%;
}

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

.match-element-applied li {
  view-transition-name: match-element;
}

Класс match-element-applied по умолчанию применяется к элементу <main>, поэтому флажок в рамке результата изначально установлен. Если снять флажок, класс будет удалён и вместо него начнёт применяться стандартная анимация перекрёстного затухания. Переключайте флажок, чтобы сравнить стандартную анимацию с анимацией, применяемой при использовании view-transition-name: match-element.

Затем мы настраиваем анимацию с помощью псевдоэлемента ::view-transition-group(): задаём animation-duration для всех групп перехода представления (обозначенных идентификатором *), а также задаём height снимкам до и после перехода равную 100%. Это помогает устранить различия в соотношении сторон снимков до и после перехода и делает анимацию более плавной:

::view-transition-group(*) {
  animation-duration: 0.5s;
}

html::view-transition-old(*),
html::view-transition-new(*) {
  height: 100%;
}

JavaScript

В этом примере класс active-item применяется к элементам списка при щелчке по ссылкам; это выполняется с помощью функции updateActiveItem():

const mainElem = document.querySelector("main");
let prevElem;
let checkboxElem = document.querySelector("input");

// View transition code
function updateActiveItem(event) {
  // Get the list item that contains the clicked link
  const clickedElem = event.target.parentElement.parentElement;

  // Set the active-item class on the list item
  clickedElem.className = "active-item";

  // Keep track of the previous item that was clicked, if any.
  // Remove the active-item class from the previous item so that only
  // one list item is placed over the <article> at any one time
  if (prevElem === clickedElem) {
    prevElem.className = "";
    prevElem = undefined;
  } else if (prevElem) {
    prevElem.className = "";
    prevElem = clickedElem;
  } else {
    prevElem = clickedElem;
  }
}

mainElem.addEventListener("click", (event) => {
  event.preventDefault(); // Prevent iframe from scrolling when clicked
  // Do nothing unless a link is clicked inside the <main> element
  if (event.target.tagName !== "A") {
    return;
  }

  // Run updateActiveItem() on its own if view transitions are not supported
  if (!document.startViewTransition) {
    updateActiveItem(event);
  } else {
    // Run updateActiveItem() via startViewTransition()
    const transition = document.startViewTransition(() =>
      updateActiveItem(event),
    );
  }
});

// Toggle the class on <main> to control whether or not match-element is applied

checkboxElem.addEventListener("change", () => {
  mainElem.classList.toggle("match-element-applied");
});

Вызов функции updateActiveItem() через функцию startViewTransition() плавно анимирует отображение сведений о технологии.

Результат

Щёлкните заголовок технологии в боковой панели и обратите внимание на анимацию перемещения её содержимого в основную область.

Также есть флажок, который по умолчанию установлен, поэтому применяется view-transition-name: match-element. Снимите флажок и снова щёлкните заголовок, чтобы увидеть, как работает переход представления без view-transition-name: match-element.

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

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

См. также

• view-transition-class
• ::view-transition-group()
• ::view-transition-old()
• ::view-transition-new()
• API переходов представления
• Плавные переходы с помощью API переходов представления