视图过渡

## 视图过渡过程
1. 当调用 document.startViewTransition() 时，API 会截取当前页面的屏幕截图。
2. 接下来，调用传递给 startViewTransition()的回调函数，一般对DOM 发生更改。
3. API 会捕获页面的新状态并实时展示。
4. API 构造了一个具有以下结构的伪元素树：

```
::view-transition
└─ ::view-transition-group(root)
   └─ ::view-transition-image-pair(root)
      ├─ ::view-transition-old(root)
      └─ ::view-transition-new(root)
```

5. 此时old和new都会执行一段过渡css动画，可通过css修改动画。
6. 动画结束后，页面保持new的效果。

## View Transitions API
 - ::view-transition-old()：转换前的旧视图的静态屏幕截图。

- ::view-transition-new()：转换后的新视图的实时表示。

## startViewTransition
使用方法：
```
document.startViewTransition(callback)
```

callback一般是用来更改dom的函数。

## 使用示例
### HTML
```html
<button id="btn">切换</button>
```

### CSS
```css
html{
	background-color: #fff;
}
button{
	border-radius: 8px;
	cursor: pointer;
	background-color: royalblue;
	color: #fff;
}
.dark{
	background-color: #111;
	color-scheme: dark;
}
::view-transition-old(*) {
	animation: none;
	mix-blend-mode: normal;
}
::view-transition-new(*) {
	mix-blend-mode: normal;
	animation: clip 1s ease-in;
}
@keyframes clip {
	from {
		clip-path: circle(0% at var(--x) var(--y));
	}
	to{
		clip-path: circle(100% at var(--x) var(--y));
	}
}
```

### JS
```javascript
btn.addEventListener('click', function(ev){
	document.documentElement.style.setProperty('--x', ev.clientX + 'px')
	document.documentElement.style.setProperty('--y', ev.clientY + 'px')
	if (document.startViewTransition) {
		document.startViewTransition(() => {
			document.documentElement.classList.toggle('dark')
		});
	} else {
		document.documentElement.classList.toggle('dark')
	}
})
```

视图过渡

酷酷番茄