View Transitions API 仅支持 SPA 内同一文档的 DOM 更新过渡，不支持传统跨页导航；需设置 body { view-transition: auto; }，异步触发，操作已挂载可见元素，并用可插值 CSS 属性。
View Transitions API 目前不能用于跨页面导航的切场动画——它只在单页应用（SPA）内生效，且仅支持同一文档中 DOM 节点的「更新重排」过渡，比如 innerHTML 替换、replaceChildren()、或 React/Vue 的组件重渲染。浏览器对跨 HTML 页面（如 a href="page2.html"）的 view-transition 仍处于实验阶段，Chrome 111+ 虽有 document.startViewTransition()，但必须配合 history.pushState() + 手动内容注入，无法直接作用于传统多页跳转。
viewTransition 在 SPA 中触发失败的常见原因
- 没有在
document.body上启用视图过渡：必须显式设置body { view-transition: auto; }，否则整个 API 调用静默失效 - 过渡逻辑写在非异步上下文中：比如在同步事件回调里直接调用
document.startViewTransition(() => {...})，但 DOM 更新尚未提交；正确做法是包裹在setTimeout(() => {}, 0)或queueMicrotask()中 - 尝试对未挂载/已移除的元素做 transition：API 只能捕获「存在且可见」的节点在更新前后的快照，若新内容还没 append 到 DOM，或旧节点已被
remove()，则过渡自动退化为无动画切换 - 使用了不支持 transition 的 CSS 属性：比如
display: none、visibility: hidden、opacity: 0配合pointer-events: none等会阻断 capture，应改用opacity: 0; transform: scale(0.95);等可插值属性
如何用 startViewTransition 实现 PPT 风翻页（左滑/右滑）
核心不是靠 transform 动画本身，而是让浏览器自动捕获旧页和新页的「视觉快照」，再用自定义 @keyframes 控制它们的位移：
::view-transition-old(root) {
animation: slide-out-right 0.4s ease-in-out;
}
::view-transition-new(root) {
animation: slide-in-left 0.4s ease-in-out;
}
@keyframes slide-out-right {
to { transform: translateX(100%); }
}
@keyframes slide-in-left {
from { transform: translateX(-100%); }
}关键点：
-
::view-transition-old(root)和::view-transition-new(root)是伪元素，对应切换前后整个视口快照 - 不要给它们设
position或z-index，浏览器会自动处理层叠 - 动画时长必须一致，否则新旧帧错位
- 若页面含 iframe 或 canvas，其内容不会被快照捕获，需额外用 JS 同步状态
为什么不用 clip-path 百叶窗 + viewTransition 组合？
因为 viewTransition 生成的快照是整屏位图，clip-path 对快照无效——你只能对原始 DOM 元素用 clip-path，而 transition 期间原始元素早已被替换或隐藏。想实现百叶窗，必须放弃 viewTransition，改用纯 CSS 的 clip-path + animation 控制多个遮罩条纹（如知识库提到的 inset() 动态偏移），或用 SVG <clippath></clippath> 配合 JS 分帧控制。
立即学习“前端免费学习笔记（深入）”；
真正容易被忽略的是：viewTransition 不是「动画开关」，它是「快照调度器」。它不管你怎么动，只管「哪两帧之间动」。动得是否像 PPT，全靠你写的 @keyframes 和 DOM 结构是否干净——比如页面里混着 fixed 定位的 header、动态插入的 tooltip、或未加 will-change: contents 的滚动容器，都可能导致快照撕裂或动画卡顿。
