多页应用的用法#

Chrome 126 起支持跨文档过渡，只要一行 CSS：

1
@view-transition {
2
  navigation: auto;
3
}

列表页和详情页各自声明过渡名：

1
.item-image {
2
  view-transition-name: item-image;
3
}

浏览器会自动截图新旧状态做交叉淡入淡出。想定制动画，覆盖两个伪元素：

1
::view-transition-old(item-image),
2
::view-transition-new(item-image) {
3
  animation-duration: 0.25s;
4
}

单页应用#

SPA 里在改 DOM 前包一层：

1
document.startViewTransition(() => updateListUI());

浏览器对函数执行前后各截一帧，中间的过程自动补间。

几个坑#

• view-transition-name 必须全页唯一，列表里循环渲染的元素不能共用一个名字，否则动画直接失效
• 页面根元素默认有一个 root 过渡名，不想要整页淡入淡出就把它禁掉
• Firefox 和 Safari 的跨文档过渡支持滞后，做好渐进增强的预期，别把核心交互押在动画上