View Transitions API 提供了一种机制，可以在更新 DOM 内容的同时，轻松地创建不同 DOM 状态之间的动画过渡。同时还可以在单个步骤中更新 DOM 内容，。
当调用document.startViewTransition()时，API 会根据当前页面的屏幕截图，创建一个动画效果，将当前页面过渡到新的 DOM 状态。
这个startViewTransition函数会返回一个回调函数，我们需要在回调函数中更新我们的 Dom，从而产生一个动画。
下方创建好了一个模板，其中包含一个按钮，点击按钮可以切换背景颜色，我们使用需要使用View Transitions API实现一个简单的圆形扩散动画效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
:root {
--bg-color: #fff;
background-color: var(--bg-color);
}
:root.dark {
--bg-color: #000;
}
</style>
</head>
<body>
<button id="btn">切换</button>
</body>
<script>
btn.addEventListener("click", (e) => {
document.documentElement.classList.toggle("dark");
});
</script>
</html>
首先，我们需要创建一个过渡，使用document.startViewTransition()函数，这个函数接收一个回调函数，我们在回调函数中更新 DOM 状态，会产生一个动画效果。
btn.addEventListener("click", (e) => {
document.startViewTransition(() => {
document.documentElement.classList.toggle("dark");
});
});
这个时候会发现，页面动画产生了一个渐隐的效果，这是因为document.startViewTransition()函数默认会创建的一个效果，如果我们想要变更的话就需要对他进行修改。