:root:active-view-transition ... {
/* ... */
}
此示例扩展了 startViewTransition 页面上的同文档视图过渡示例。
<main>
<section class="color">
<h2>Color is changing!</h2>
</section>
<button id="change-color">Change Color</button>
</main>
一个 <h2> 元素最初具有 display: none 样式，当视图过渡正在进行时，使用 :active-view-transition 伪类将 <h2> 样式设置为 display: block 来覆盖此样式。按钮使用 visibility: hidden 隐藏。
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);