CSS-Pseudoklasse `:active-view-transition`

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 Wurzelelement eines Dokuments zu, während eine Ansichtsübergangsanimation läuft (aktiv ist). Sobald der Übergang abgeschlossen ist, trifft sie nicht mehr zu.

Syntax

css

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

Beispiele

Einen aktiven Ansichtsübergang gestalten

Dieses Beispiel erweitert das einfache Beispiel für einen Ansichtsübergang 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 hat zunächst den Stil display: none. Die Pseudoklasse :active-view-transition überschreibt diesen Stil für das <h2>-Element mit display: block. Während des Ansichtsübergangs wird die Schaltfläche mit visibility: hidden ausgeblendet:

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

Spezifikationen

Spezifikation
CSS View Transitions Module Level 2 # the-active-view-transition-pseudo

Browser-Kompatibilität

Siehe auch

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

CSS-Pseudoklasse :active-view-transition