Псевдокласс CSS `:active-view-transition-type()`

Функциональный :active-view-transition-type() CSS-псевдокласс соответствует элементам, когда выполняется переход представления с одним или несколькими определёнными типами (переход активен), и перестаёт соответствовать после завершения перехода представления.

html:active-view-transition-type(forwards, backwards) {
  /* ... */
}

Синтаксис

:active-view-transition-type(<custom-ident>#) {
  /* ... */
}

Параметры

<custom-ident>#

Одно или несколько разделённых запятыми значений <custom-ident>, задающих типы, которые можно применить к активному переходу представления, чтобы селектор соответствовал элементу.

Описание

Типы переходов представления позволяют задавать разные типы для активных переходов представления. Типы можно задать для переходов представления несколькими способами:

• Для переходов представления в пределах одного документа (SPA) укажите типы в параметре types метода startViewTransition().
• Для переходов представления между документами укажите типы в дескрипторе types директивы @view-transition.
• Также можно изменять типы активного перехода представления на лету с помощью свойства types соответствующего объекта ViewTransition:
  • Для переходов представления в пределах одного документа это объект ViewTransition, возвращаемый методом startViewTransition().
  • Для переходов представления между документами объект ViewTransition доступен в свойстве viewTransition объекта события pageswap для исходящей страницы, а для входящей страницы — в свойстве viewTransition объекта события pagereveal.
  • Также можно получить доступ к активному ViewTransition через свойство Document.activeViewTransition. Это обеспечивает единообразный способ доступа к активному переходу представления в любом контексте.

Когда для активного перехода представления задан один или несколько типов, к корневому элементу документа можно применить псевдокласс :active-view-transition-type(), чтобы задать пользовательские стили для каждого типа. Аргументом псевдокласса служит разделённый запятыми список типов, которые можно задать для активного перехода представления, чтобы селектор соответствовал элементу.

Например, в приложении-галерее изображений может потребоваться применять разные анимации перехода к элементу <img> при смене отображаемого изображения — в зависимости от того, перемещаетесь ли вы вперёд или назад по последовательности, удаляете изображение или добавляете его в последовательность.

Поведение «ИЛИ» и «И»

Важно отметить, что разделённый запятыми список типов внутри псевдокласса :active-view-transition-type() задаёт поведение «ИЛИ»: селектор будет соответствовать элементу, если для активного перехода представления задан один или несколько указанных типов.

Например, в этом случае селектор будет соответствовать элементу, если для активного перехода представления задан тип forwards, backwards или оба типа:

html:active-view-transition-type(forwards, backwards) {
  /* ... */
}

Чтобы задать поведение «И» — то есть чтобы селектор соответствовал элементу только при наличии всех типов, — можно объединить несколько псевдоклассов :active-view-transition-type() в цепочку. В следующем случае селектор будет соответствовать элементу, только если для активного перехода представления заданы типы slide и forwards:

html:active-view-transition-type(slide):active-view-transition-type(forwards) {
  /* ... */
}

Примеры

Несколько полных примеров см. в разделе Использование типов переходов представления.

Пример использования :active-view-transition-type()

В этом примере представлен простой документ, который переключается между двумя разными фрагментами содержимого с помощью двух кнопок — «Назад» и «Вперёд». Мы покажем, как использовать типы переходов представления, чтобы выбирать анимацию перехода в зависимости от нажатой кнопки.

HTML

Разметка содержит один элемент <p> для содержимого и два элемента <button> для запуска переходов представления.

<p>This is my first piece of content. I hope you like it!</p>
<div>
  <button id="backwards">Backwards</button>
  <button id="forwards">Forwards</button>
</div>

JavaScript

В скрипте мы создаём ссылки на обе кнопки и абзац с содержимым, а затем сохраняем два фрагмента содержимого в константах.

const backBtn = document.getElementById("backwards");
const fwdBtn = document.getElementById("forwards");
const content = document.querySelector("p");

const first = "This is my first piece of content. I hope you like it!";
const second =
  "This is my second piece of content. Is it better than the first?";

Затем мы добавляем обработчики событий click для кнопок «Назад» и «Вперёд». При нажатии на кнопку выполняется функция changeContent().

backBtn.addEventListener("click", changeContent);
fwdBtn.addEventListener("click", changeContent);

Наконец, мы определяем функцию changeContent(). Сначала объявляем значение type, которое будет содержать тип перехода представления. Если целью события является кнопка «Назад», присваиваем type значение backwards. В противном случае присваиваем type значение forwards. Затем вызываем метод startViewTransition(), чтобы обновить содержимое и запустить переход:

• В функции обратного вызова update проверяется, равен ли textContent абзаца строке first. Если да, присваиваем ему строку second. Если нет, присваиваем ему строку first.
• Массиву types передаётся один элемент — значение type, объявленное ранее.

function changeContent(e) {
  const type = e.target === backBtn ? "backwards" : "forwards";
  document.startViewTransition({
    update() {
      content.textContent === first
        ? (content.textContent = second)
        : (content.textContent = first);
    },
    types: [type],
  });
}

CSS

В стилях сначала создаём набор вложенных правил с помощью псевдокласса :active-view-transition. Эти стили применяются при любом активном переходе представления независимо от его типов. Мы задаём view-transition-name со значением none для элемента :root>, поскольку при переходе мы не хотим захватывать и анимировать никакие элементы, кроме элемента <p>, которому задаётся view-transition-name со значением slide.

html,
body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

div {
  display: flex;
  width: 60%;
  justify-content: space-between;
}

p {
  font-size: 1.7em;
  width: 60%;
  color: blue;
  margin-top: 0;
}

html:active-view-transition {
  :root {
    view-transition-name: none;
  }
  p {
    view-transition-name: slide;
  }
}

Затем с помощью псевдокласса :active-view-transition-type() создаём два блока вложенных стилей. Первый применяется, только когда для активного перехода представления задан тип forwards, а второй — только когда задан тип backwards. В каждом блоке мы используем псевдоэлементы ::view-transition-old() и ::view-transition-new(), чтобы задать пользовательские значения animation-name для исходного и входящего представлений группы захвата slide.

В результате:

• При типе перехода forwards старое представление содержимого сдвигается влево, а новое появляется справа.
• При типе перехода backwards старое представление содержимого сдвигается вправо, а новое появляется слева.

html:active-view-transition-type(forwards) {
  &::view-transition-old(slide) {
    animation-name: slide-out-to-left;
  }
  &::view-transition-new(slide) {
    animation-name: slide-in-from-right;
  }
}

html:active-view-transition-type(backwards) {
  &::view-transition-old(slide) {
    animation-name: slide-out-to-right;
  }
  &::view-transition-new(slide) {
    animation-name: slide-in-from-left;
  }
}

Наконец, мы используем блоки анимации @keyframes, чтобы определить упомянутые выше анимации.

@keyframes slide-in-from-left {
  from {
    translate: -100vw 0;
  }
}
@keyframes slide-in-from-right {
  from {
    translate: 100vw 0;
  }
}
@keyframes slide-out-to-left {
  to {
    translate: -100vw 0;
  }
}
@keyframes slide-out-to-right {
  to {
    translate: 100vw 0;
  }
}

Результат

Пример отображается следующим образом:

Попробуйте нажать кнопки «Назад» и «Вперёд». Обратите внимание: хотя для запуска обновления содержимого и перехода представления в обоих случаях используется один и тот же код, анимация перехода отличается. Это происходит потому, что при нажатии каждой кнопки задаётся свой тип перехода.

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

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

См. также

• Document.activeViewTransition
• Псевдокласс :active-view-transition
• API переходов представления
• Использование API переходов представления
• Использование типов переходов представления