Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
: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
: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.
<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;
}
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
Chargement...
Voir aussi
- La pseudo-classe
:active-view-transition-type() - La méthode
startViewTransition