: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 ⁨5 nov. 2025⁩ par les contributeurs du MDN.

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