`:active-view-transition` CSS псевдокласс

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

Синтаксис

:root:active-view-transition ... {
  /* ... */
}

Примеры

Стилизация активного перехода представления

Этот пример расширяет базовый пример перехода представления на странице startViewTransition.

<main>
  <section class="color">
    <h2>Color is changing!</h2>
  </section>
  <button id="change-color">Change Color</button>
</main>

Элемент <h2> изначально имеет стиль display: none, который переопределяется с помощью псевдокласса :active-view-transition, задающего стиль <h2> равным display: block. Кнопка скрывается с помощью visibility: hidden, пока выполняется переход представления:

html {
  --bg: indigo;
}
main {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
section {
  background-color: var(--bg);
  height: 60px;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
}
::view-transition-group(root) {
  animation-duration: 2s;
}

h2 {
  display: none;
  color: white;
}
:root:active-view-transition h2 {
  display: block;
}
:root:active-view-transition button {
  visibility: hidden;
}

const colors = ["darkred", "darkslateblue", "darkgreen"];
const colBlock = document.querySelector(".color");
let count = 0;
const updateColor = () => {
  colBlock.style = `--bg: ${colors[count]}`;
  count = count !== colors.length - 1 ? ++count : 0;
};
const changeColor = () => {
  if (!document.startViewTransition) {
    updateColor();
    return;
  }
  const transition = document.startViewTransition(() => {
    updateColor();
  });
};
const changeColorButton = document.querySelector("#change-color");
changeColorButton.addEventListener("click", changeColor);
changeColorButton.addEventListener("keypress", changeColor);

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

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

См. также

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