:active-view-transition

Baseline 2025

Newly available

Depuis October 2025, cette fonctionnalité fonctionne sur les appareils et les versions de navigateur les plus récents. Elle peut ne pas fonctionner sur les appareils ou navigateurs plus anciens.

La pseudo-classe CSS :active-view-transition correspond à l'élément racine d'un document lorsqu'une transition de vue est en cours (active) et cesse de correspondre une fois la transition terminée.

Syntaxe

css

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

Exemples

Mettre en forme une transition de vue active

Cet exemple s'appuie sur l'exemple de transition de vue dans le même document de la page startViewTransition.

html

<main>
  <section class="color">
    <h2>La couleur change !</h2>
  </section>
  <button id="change-color">Changer la couleur</button>
</main>

Un élément <h2> a initialement un style display: none, et cela est écrasé à l'aide de la pseudo-classe :active-view-transition en définissant le style <h2> sur display: block. Le bouton est masqué à l'aide de visibility: hidden, lorsque la transition de vue est en cours :

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 updateColour = () => {
  colBlock.style = `--bg: ${colors[count]}`;
  count = count !== colors.length - 1 ? ++count : 0;
};
const changeColor = () => {
  if (!document.startViewTransition) {
    updateColour();
    return;
  }
  const transition = document.startViewTransition(() => {
    updateColour();
  });
};
const changeColorButton = document.querySelector("#change-color");
changeColorButton.addEventListener("click", changeColor);
changeColorButton.addEventListener("keypress", changeColor);

Spécifications

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

Compatibilité des navigateurs

Voir aussi

La pseudo-classe :active-view-transition-type()
La méthode startViewTransition

Help improve MDN

Learn how to contribute

Cette page a été modifiée le 15 déc. 2025 par les contributeurs du MDN.

View this page on GitHub • Report a problem with this content