view transitions api不能直接用document.body做过渡，因为它要求更新必须是导航驱动的局部dom变更（如更新），而非整页重绘；直接替换body.innerhtml会因非导航上下文导致静默失败或invalidstateerror。
View Transitions API 为什么不能直接用 document.body 做过渡？
因为 View Transitions API 要求过渡必须发生在「导航触发的 DOM 更新期间」，不是任意 DOM 变更都能触发。直接调用 document.startViewTransition(() => { ... }) 并修改 document.body 内容（比如替换整个 innerHTML），浏览器会拒绝——它检测到这不是一次“导航驱动的更新”，document.startViewTransition 会静默失败或抛出 InvalidStateError。
真正起作用的场景是：用户点击链接、history.pushState 或 location.href 改变后，由框架/路由在 beforeNavigate 或页面加载回调中调用 transition，并在其中执行 DOM 替换（比如更新 main 区域）。
- 只对
<main></main>、<article></article>等语义化容器做局部更新，比整页重绘更可控 - 必须确保新旧 DOM 中有相同
view-transition-name的元素，否则动画不匹配 - 过渡期间浏览器会自动为参与元素生成伪元素
::view-transition-old(...)和::view-transition-new(...)，你只能通过 CSS 选中它们
如何给两个页面间的相同元素加匹配过渡？
关键不是 JS 控制，而是 HTML 层面声明 view-transition-name。比如从首页跳详情页，都有一张商品图，需保证两者都有且值一致：
@@##@@
注意：view-transition-name 必须是全局唯一字符串；同一页面内不能有两个同名元素；如果新旧页面里该属性值不同（比如一个写 "product-img"，另一个写 "product-image"），过渡就断开，回退成硬切。
- 推荐用语义化短名，如
"hero"、"nav-logo"、"user-avatar" - 动态生成的元素（如 React/Vue 渲染）要在挂载时同步设置该属性，不能依赖后续 JS 补充
- 服务端渲染（SSR）页面也得在 HTML 源码里带上这个属性，否则首屏无过渡
document.startViewTransition 的参数函数里能做什么？
只能做「同步的 DOM 更新操作」，不能 await 异步、不能 setTimeout、不能发网络请求。典型安全写法是立即替换目标容器内容：
document.startViewTransition(() => {
mainElement.innerHTML = newContentHTML; // ✅ 同步写入
});
以下全是错误用法：
-
await fetch(...).then(...)—— 异步中断 transition 生命周期 -
setTimeout(() => { mainElement.innerHTML = ... }, 0)—— 即便延迟为 0，也脱离同步上下文 - 在函数内读取
getComputedStyle或触发 layout —— 浏览器可能已进入过渡帧，结果不可靠
真实项目中，建议把数据获取和模板渲染提前做完，transition 函数只负责“贴现成 HTML”这一步。
过渡动画卡顿或闪烁的常见 CSS 坑
浏览器对 ::view-transition-old 和 ::view-transition-new 的渲染有严格限制：它们默认是 fixed 定位、覆盖全屏，且不继承父级 transform。所以如果你给容器加了 transform: scale(0.95)，过渡元素会“突兀弹出”，因为没被缩放影响。
- 必须显式给伪元素加
transform、opacity等动画属性，不能靠继承 - 避免在伪元素上用
filter: blur()或backdrop-filter，高斯模糊在 transition 中性能极差，尤其低端设备 -
view-transition-name元素若含border-radius，新旧版本圆角不一致会导致裁剪错位，建议统一设为border-radius: 0或用clip-path控制
最稳妥的起步方案：先只做 opacity + transform: translateX，确认流程跑通再叠加复杂效果。
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
