View Transitions API 不是 HTML 转 View 的工具
它不接收 HTML 字符串或 DOM 片段作为输入，也不“转换”现有 HTML 到某种视图对象。它是浏览器原生的、基于 DOM 树快照的过渡机制，只作用于已挂载的真实元素。
常见误解是想用它做服务端渲染后的首屏动画，或把 document.innerHTML 丢进去——这行不通。View Transitions 只在用户触发导航（如 history.pushState）或显式调用 document.startViewTransition() 时生效，且要求新旧 DOM 都已存在于文档中。
- 必须在用户交互（点击、submit）或可感知的导航中调用，不能在
DOMContentLoaded或setTimeout里硬启 - 过渡前后的元素需有稳定、可匹配的
key（通过view-transition-nameCSS 属性声明） - 服务端返回的 HTML 若未执行 JS 或未重挂载组件，
startViewTransition会静默失败，无报错
怎么用 startViewTransition 触发页面级过渡
核心是把 DOM 更新逻辑包进 document.startViewTransition() 的回调里，浏览器会自动捕获更新前后的快照并生成过渡动画。
典型适用场景：单页应用中路由切换、搜索结果替换、表单提交后内容刷新。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 必须在同一个事件循环中完成 DOM 修改，不能 await 异步操作后再改 DOM（否则快照捕获失效）
- 推荐写法：
document.startViewTransition(() => { /* 同步更新 DOM */ })，不要解构返回值 - 若需等待数据，先 fetch，再在
.then里调用startViewTransition，确保 DOM 更新是同步的 - 过渡期间，浏览器会自动添加
html::view-transition和::view-transition-group伪元素，可配合 CSS 控制
button.addEventListener('click', () => {
fetch('/next-page.html')
.then(r => r.text())
.then(html => {
document.startViewTransition(() => {
document.body.innerHTML = html;
});
});
});view-transition-name 怎么配才匹配得上
匹配失败是过渡不出现的最常见原因。浏览器靠这个 CSS 属性识别“哪个新元素对应哪个旧元素”，不是靠 class、id 或结构位置。
必须成对出现：旧 DOM 元素和新 DOM 元素都带相同值的 view-transition-name，且该值在整个页面中唯一（重复会导致匹配混乱）。
- 写法是 CSS 属性：
style="view-transition-name: title"或在样式表中写.header { view-transition-name: title; } - 值不能是空字符串、
none或动态计算值（如style={{ viewTransitionName: item.id }}在 React 中需确保前后一致） - 不支持通配符或正则；不区分大小写但建议统一小写
- 如果旧元素已卸载（比如被
innerHTML = ''清掉），即使新元素有 name，也无旧快照可比——所以必须保证旧元素在startViewTransition调用时尚在 DOM 中
Chrome 111+ 以外的环境怎么处理降级
目前仅 Chromium 内核（Chrome、Edge、Opera）完整支持，Firefox 仍为实验性（需手动开启 flag），Safari 无计划支持。不能假设 document.startViewTransition 存在。
检测和降级必须前置，不能等报错再 fallback——因为不支持时该函数不存在，直接调用会抛 TypeError。
- 安全调用方式：
if (document.startViewTransition) { ... }，别用typeof或 try/catch 包裹整个流程 - 降级策略建议：保持原有 DOM 更新逻辑不变，只跳过
startViewTransition包裹，让用户看到“无动画刷新” - 不要试图用 CSS transitions 模拟 View Transitions 的快照行为——它能处理元素移位、缩放、甚至跨父容器匹配，纯 CSS 无法复现
- 构建时可通过
caniuse数据或 UA 检测做资源分发，但运行时检测更可靠
View Transitions 的关键约束藏在“快照时机”和“name 匹配”里，不是加个 API 调用就能动起来。很多失败案例其实只差一行 view-transition-name 或一次提前清空 DOM 的操作。
