view transition
简介
view transition 视图变化的原理：
- 调用
document.startViewTransition()，浏览器会捕获 DOM 当前状态的快照 - 执行
document.startViewTransition()提供的回调函数，一旦调用完成，浏览器会捕获 DOM 更新后状态的快照 - 触发两者（新旧快照）的过渡动画，包括透明度、位移等变化，也可以自定义 CSS 动画。但浏览器默认的过渡效果是一种交叉淡入的效果
一旦浏览器捕获了 DOM 的“之前”和“之后”的快照，会在 html 页面之上创建一个叠加层，是一个如下的伪元素树：
::view-transition
└─ ::view-transition-group(name)
└─ ::view-transition-image-pair(name)
├─ ::view-transition-old(name) <-- 旧快照
└─ ::view-transition-new(name) <-- 新快照
| 伪元素 | 核心职责 | 默认包含的动画属性 | 作用 |
|---|---|---|---|
::view-transition | 舞台背景 | 无 | 写全局属性 通过其补货点击事件 |
::view-transition-group | 几何形变管理层 | width, height, transform (位置) | 调用位移的速度（animation-duration）和曲线（animation-timing-function） |
::view-transition-image-pair | 图像混合层 | 无 (主要处理 isolation) | 一般不用修改 |
::view-transition-old | 视觉内容 (旧图) | opacity (1 -> 0), transform (如果有必要) | 消失的动画 |
::view-transition-new | 视觉内容 (新图) | opacity (0 -> 1), transform (如果有必要) | 显示的动画 |
使用步骤
为目标元素添加 view-transition-name 属性
.target {
view-transition-name: stage;
}
自定义 CSS 动画，以描述元素在过渡期间应该如何变化
@keyframes fade-in-1 {
0% {
scale: 0;
opacity: 0;
}
100% {
scale: 1;
opacity: 1;
}
}
@keyframes fade-out-1 {
0% {
scale: 1;
opacity: 1;
}
100% {
scale: 0;
opacity: 0;
}
}
用于 ::view-transition-old() （使用离开 exit 对应的动画）和 ::view-transition-new() （使用进入 entrances 对应的动画）：
/* 元素消失动画定义 */
::view-transition-old(stage) {
animation: fade-out-1 0.5s ease-in-out both;
}
/* 元素显示动画定义 */
::view-transition-new(stage) {
animation: fade-in-1 0.5s ease-in-out both;
}
在 JavaScript 中使用 document.startViewTransition() 方法来启动视图过渡效果，传递一个回调函数，该函数用于在过渡期间更新元素的状态：
function viewTransition(fn, params) {
if (document.startViewTransition) {
document.startViewTransition(() => fn(params));
} else {
fn(params);
}
}
viewTransition(() => {
// ...
}});