View Transitions 是浏览器原生页面过渡 API，非 CSS 库或 JS 插件；目前 Chrome 111+ 和 Edge 111+ 稳定支持，Firefox 与 Safari 尚未实现，需在用户交互中调用且确保文档活跃。
View Transitions 是什么，现在能用吗
View Transitions 不是 CSS 动画库，也不是 JavaScript 插件，它是浏览器原生支持的页面级过渡 API，目前仅在 Chrome 111+（含 Edge 111+）中稳定启用，Firefox 和 Safari 尚未实现。开启它不需要 polyfill，但必须满足两个硬性条件：document.startViewTransition 只能在用户交互（如 click、keydown）触发的事件处理函数中调用；且当前文档必须处于活跃状态（不能在 iframe 或后台 tab 中静默调用）。
常见错误现象：TypeError: document.startViewTransition is not a function —— 大概率是浏览器版本过低，或脚本执行时机不对（比如放在 DOMContentLoaded 里直接调用）。
如何用 startViewTransition 包裹一次 DOM 更新
核心逻辑很简单：把会触发 DOM 变更的操作（比如替换 innerHTML、切换 class、挂载/卸载组件）包进 document.startViewTransition(() => {...}) 的回调里。浏览器会自动捕获变更前后的快照，并对匹配的元素应用过渡动画。
实操要点：
立即学习“前端免费学习笔记（深入）”；
-
startViewTransition返回一个Promise，可 await 它来确保过渡结束，但不是必须 - 只包裹「会导致视觉变化」的 DOM 操作，不要包裹数据请求（
fetch）本身，应在请求完成后再调用 - 过渡效果依赖元素的
key或view-transition-name属性匹配，否则浏览器默认按位置做淡入淡出 - 若更新涉及多个不相关区域，可多次调用
startViewTransition，但每次只能有一个活跃过渡
示例（点击按钮切换内容）：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
button.addEventListener('click', () => {
document.startViewTransition(() => {
container.innerHTML = '<h2>新页面</h2><p>这是过渡后的内容</p>';
});
});怎么让特定元素做自定义过渡（比如缩放+位移）
靠 view-transition-name 属性建立前后帧的元素映射关系。只要两个元素（旧 DOM 和新 DOM 中）拥有相同的非空 view-transition-name 值，浏览器就会把它们视为同一“视图元素”，并允许你用 CSS 选择器 ::view-transition-old(<name>) 和 ::view-transition-new(<name>) 单独控制。
关键细节：
- 名字必须是合法的 CSS 标识符（不能含空格、特殊符号），推荐用短横线分隔，如
product-card - 旧元素和新元素需同时存在（即不能先 remove 再 append），所以通常用
replaceChildren或框架的 reconciliation 机制更稳妥 - 过渡期间，旧元素会被临时加
view-transition-old类，新元素加view-transition-new类，可用于 JS 监听 - CSS 动画需写在
@keyframes中，再通过animation应用到伪元素上，不能直接用transition
示例（给标题加缩放入场）：
<h1 view-transition-name="title">旧标题</h1>
<p>/<em> CSS </em>/
::view-transition-old(title) {
animation: fade-scale-in 0.3s forwards;
}
@keyframes fade-scale-in {
from { opacity: 0; transform: scale(0.9); }
to { opacity: 1; transform: scale(1); }
}兼容性兜底和调试技巧
没有 View Transitions 支持时，startViewTransition 会退化为同步执行回调，所以代码本身是安全的——但视觉上无动画。真正容易被忽略的是样式隔离问题：过渡中的伪元素（::view-transition-old 等）不受 Shadow DOM 约束，会穿透到全局，导致样式污染或失效。
调试建议：
- 在 Chrome DevTools 的
Rendering面板勾选Highlight View Transitions，可实时看到哪些元素被识别为过渡目标 - 用
console.log(document.timeline.currentTime)检查过渡是否卡在某个时间点（常见于动画阻塞或 layout thrashing） - 避免在过渡回调中触发强制同步布局（如读取
offsetHeight），这会打断浏览器的优化路径 - 服务端渲染（SSR）场景下，首次加载无法触发 View Transitions，需等客户端 hydration 后的用户操作才生效
过渡的复杂度不在 API 调用本身，而在于 DOM 结构一致性、CSS 作用域控制和浏览器渲染管线的理解。写错一个 view-transition-name 或漏掉一个 will-change: transform，都可能让动画完全不出现，且无报错提示。
