View Transitions 实现网页转场动画只需两步：用 document.startViewTransition() 包裹 DOM 更新，再通过 CSS 伪元素 ::view-transition-old/new 控制样式；它基于浏览器快照合成，性能优、原生支持跨页跳转，且可命名元素实现精准过渡。
网页转场动画用 View Transitions 实现，核心就两件事：用 document.startViewTransition() 包裹 DOM 更新，再用 CSS 控制过渡样式。它不是靠 JS 帧动画模拟，而是浏览器自动截取“旧快照”和“新快照”，在顶层合成动画——性能好、代码少、原生支持跨页面跳转。
基础转场：几行代码就有淡入淡出
只要调用一次 API，浏览器就会启用默认的 crossfade（交叉淡变）效果：
- 在导航或内容更新时包裹 DOM 操作：
document.startViewTransition(() => { document.getElementById('main').innerHTML = newContent; }); - 无需额外 JS 动画库，也不用手动管理状态或截图
- 默认动画已启用，直接生效；想改时长或缓动，只需覆盖 CSS 伪元素
自定义根级动画：控制整页切换风格
通过 ::view-transition-old(root) 和 ::view-transition-new(root) 伪元素，可以统一定义页面级过渡：
- 侧滑入场：
::view-transition-new(root) { animation: slide-in-right 0.4s ease-out forwards; } - 缩放入场：
::view-transition-new(root) { animation: zoom-in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; } - 注意要配好
@keyframes，且建议加forwards防止动画结束后样式回退
命名视图动画：让关键元素“有迹可循”
当列表项点击放大为详情页、头像点击展开弹窗时，需要元素保持视觉连续性。这时用 view-transition-name 标记对应元素：
- 列表页中给缩略图加：
style="view-transition-name: product-thumb;" - 详情页中同名元素也设：
style="view-transition-name: product-thumb;" - CSS 中分别定义旧/新状态动画：
::view-transition-old(product-thumb) { animation: shrink-to-thumb 0.35s ease-out; }::view-transition-new(product-thumb) { animation: expand-from-thumb 0.35s ease-out; }
进阶控制：监听状态与兼容处理
实际项目中需应对加载延迟、动画中断或老浏览器场景：
- 监听过渡完成：
transition.finished.then(() => console.log('done')); - 避免白屏：在
transition.ready后注入动态样式或延迟资源加载 - 兼容性兜底：检查
if ('startViewTransition' in document)，不支持时降级为普通 DOM 更新
