Pseudoklasse `:active-view-transition` in CSS

Baseline 2025

Neu verfügbar

Seit Oktober 2025 funktioniert diese Funktion auf aktuellen Geräten und in aktuellen Browserversionen. Auf älteren Geräten oder in älteren Browsern funktioniert sie möglicherweise nicht.

Vollständige Kompatibilität anzeigen
Mehr erfahren

Die CSS-Pseudoklasse :active-view-transition trifft auf das Root-Element eines Dokuments zu, wenn ein View Transition ausgeführt wird (aktiv), und trifft nicht mehr zu, sobald der Übergang abgeschlossen ist.

Syntax

css

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

Beispiele

Gestaltung einer aktiven View Transition

Dieses Beispiel erweitert das Beispiel für eine grundlegende View Transition auf der Seite zu startViewTransition.

html

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

Ein <h2>-Element besitzt anfangs den Stil display: none, der mithilfe der Pseudoklasse :active-view-transition überschrieben wird, indem der Stil des <h2> auf display: block gesetzt wird. Die Schaltfläche wird mit visibility: hidden ausgeblendet, während die View Transition ausgeführt wird:

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

css

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);