view-transition 不是 HTML 属性，需通过 JavaScript 调用 document.startViewTransition() 启用，且仅 Chromium 支持；元素参与过渡须满足：view-transition-name 非 none、新旧节点值完全一致、均存在于 DOM 中，并由该 API 包裹状态变更。
目前 view-transition 不是 HTML 属性，也没有 view-transition_html 这个东西——这是对 Chrome 111+ 新增的 document.startViewTransition() API 的常见误解。它不能通过纯 HTML 声明启用，必须用 JavaScript 控制，且只在支持该特性的浏览器（当前仅 Chromium 系列）中生效。
为什么加了 view-transition-name 没反应？
因为仅写 CSS 是无效的。元素必须同时满足三个条件才能参与过渡：
-
view-transition-name值非none，且同一页面中两个元素的值完全一致（区分大小写、空格） - 这两个元素在 transition 触发前后都存在于 DOM 中（不能一个被
display: none或移除） - 必须由
document.startViewTransition(() => {...})包裹状态变更（如路由跳转、DOM 更新）
常见错误：直接在 <div view-transition-name="title"> 上写属性，但没调用 JS API，或新旧节点 name 不匹配。
document.startViewTransition() 怎么用才不报错？
这个函数返回一个 Promise，但只接受一个同步执行的函数作为参数，且该函数内部必须触发 DOM 变更（如修改 innerHTML、appendChild、router.push）。它不能包裹异步操作本身。
立即学习“前端免费学习笔记（深入）”；
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
// ✅ 正确：DOM 更新发生在回调内
document.startViewTransition(() => {
article.innerHTML = newContent;
});
// ❌ 错误：await 在回调外，transition 已结束
const res = await fetch('/post');
document.startViewTransition(() => {
article.innerHTML = res.text(); // 这里还没数据
});
// ✅ 正确：fetch 放在回调内，但注意要同步设置 loading 状态
document.startViewTransition(() => {
article.innerHTML = '<div class="loading"></div>';
});
fetch('/post').then(r => r.text()).then(html => {
document.startViewTransition(() => {
article.innerHTML = html;
});
});
过渡动画卡顿或闪烁的常见原因
视图过渡依赖合成层和 snapshot 机制，以下情况会导致异常：
- CSS 中用了
transform: scale(0)或opacity: 0等会触发“不可见快照”的样式，导致旧元素无法捕获 - 元素有
contain: layout paint或will-change: transform，干扰了浏览器自动创建过渡图层 - 过渡中涉及大量文本重排（如未设固定宽高的容器内文字流式换行），造成 layout thrashing
- 自定义
::view-transition-group动画时间过长（建议 ≤ 300ms），超出系统默认超时阈值
调试技巧：打开 Chrome DevTools → Rendering → 勾选 “View transitions”，可高亮显示参与过渡的元素及 snapshot 状态。
服务端渲染（SSR）/静态站点怎么用？
服务端无法调用 startViewTransition，所以必须在客户端 hydration 后补全逻辑。关键点：
- 服务端输出的 HTML 中，新旧内容需共存（如用
data-view-transition-id标记对应关系） - 首次加载后，用 JS 找到待过渡的元素对，手动触发
startViewTransition - 若使用框架（如 Astro、Qwik），优先查其官方
viewTransitions插件，避免自己维护 DOM 映射逻辑
真实限制：不支持跨 origin iframe、不支持 iframe 内部过渡、不支持打印预览模式。这些边界场景容易被忽略，但一旦遇到就无解。
