Свойство CSS `view-transition-class`

Свойство view-transition-class CSS присваивает выбранным элементам один или несколько идентифицирующих классов (<custom-ident>), предоставляя дополнительный способ стилизации переходов представления для этих элементов.

Синтаксис

/* <custom-ident> value examples */
view-transition-class: card;
view-transition-class: card fast-slide;

/* Keyword value */
view-transition-class: none;

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

Значения

<custom-ident>

Идентифицирующее имя, используемое для выбора псевдоэлементов перехода представления при стилизации. В отличие от view-transition-name, класс не обязан быть уникальным и не приводит к участию элемента в отдельной группе перехода представления.

none

К именованным псевдоэлементам перехода представления, созданным для этого элемента, не будет применяться ни один класс.

Описание

Значение view-transition-class предоставляет точку привязки для стилизации, похожую на имя класса CSS, которую можно использовать для применения одинаковых стилей к нескольким псевдоэлементам перехода представления. Оно не помечает элемент для захвата. Для каждого отдельного элемента по-прежнему требуется собственное уникальное значение view-transition-name; view-transition-class используется только как дополнительный способ стилизации элементов, у которых уже есть view-transition-name. Поддержка автоматического определения view-transition-name обсуждается в спецификации CSS View Transitions Module Level 2.

Свойство view-transition-class применяет стили с помощью псевдоэлементов перехода представления, в том числе ::view-transition-group(), ::view-transition-image-pair(), ::view-transition-old() и ::view-transition-new(). Это отличается от view-transition-name, который сопоставляет переходы представления между элементом в старом состоянии и соответствующим ему элементом в новом состоянии.

Пока свойство view-transition-class не получит полную поддержку во всех браузерах, поддерживающих переходы представления, указывайте для каждого элемента пользовательское значение ::view-transition-group().

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

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

view-transition-class = 
  none |
  <custom-ident>+

Примеры

Стилизация общего класса для нескольких элементов

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

<div class="card" id="card1">Card 1</div>
<div class="card" id="card2">Card 2</div>
<div class="card" id="card3">Card 3</div>

/* Each element must have a unique view-transition-name */
#card1 {
  view-transition-name: card-1;
}

#card2 {
  view-transition-name: card-2;
}

#card3 {
  view-transition-name: card-3;
}

/* But they can all share the same view-transition-class */
.card {
  view-transition-class: card;
}

/* This single rule applies to all three cards' transitions */
::view-transition-group(.card) {
  animation-duration: 0.5s;
  animation-timing-function: ease-in-out;
}

Использование нескольких классов для одного элемента

Значение view-transition-class может представлять собой список идентификаторов, разделённых пробелами. Это позволяет сочетать несколько «атомарных» стилей для одного элемента и независимо нацеливать каждый из них с помощью псевдоэлементов перехода представления. В этом примере у обеих карточек есть два общих класса: slide задаёт анимацию, а fast-transition — её длительность. При этом у каждой карточки по-прежнему есть собственное уникальное значение view-transition-name.

<div class="card" id="card1">Card 1</div>
<div class="card" id="card2">Card 2</div>

.card {
  view-transition-class: slide fast-transition;
}

#card1 {
  view-transition-name: card-1;
}

#card2 {
  view-transition-name: card-2;
}

/* The `slide` class drives which animation runs... */
::view-transition-new(.slide) {
  animation-name: slide-in;
}

::view-transition-old(.slide) {
  animation-name: slide-out;
}

/* ...while the `fast-transition` class drives how long it runs. */
::view-transition-group(.fast-transition) {
  animation-duration: 0.5s;
}

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

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

См. также

• view-transition-name
• Руководство по использованию API переходов представления
• API переходов представления
• Плавные переходы с помощью API переходов представления