CSS view-transition 视图过渡生成器

可视化生成 CSS 视图过渡（View Transitions API，document.startViewTransition， Chrome 111+ 同文档 / Chrome 126+ 跨文档，Safari 18+，Firefox 136+ 原生支持）：完整支持同文档过渡（SPA 场景，document.startViewTransition(callback)）与 跨文档过渡（MPA 场景，@view-transition { navigation: auto; }）、 view-transition-name 命名元素独立过渡、 ::view-transition-group / image-pair / old / new 四种伪元素动画覆盖。内置原理说明面板——快照机制、命名元素独立过渡、伪元素树结构、浏览器兼容性一目了然。 iframe 沙箱预览可实际触发 startViewTransition 观察 A/B 状态切换效果，内置默认淡入淡出、卡片展开、共享元素过渡、主题切换等 8 组预设。适用于 SPA 状态切换平滑过渡、MPA 多页应用导航动画、共享元素动画、主题切换动画等现代前端开发场景。所有处理在浏览器本地完成。

预设效果

全局配置

过渡模式

同文档模式：用 document.startViewTransition() 在单页内触发过渡，适合 SPA。

默认时长

默认缓动

命名元素

为元素分配 view-transition-name，浏览器会自动捕获其新旧快照并独立过渡。

暂未添加命名元素，整页将使用默认淡入淡出。

可交互预览

点击预览内的「切换状态」按钮，实际触发 document.startViewTransition 观察过渡效果。

原理说明

快照机制：调用 startViewTransition 时，浏览器先捕获当前 DOM 的旧快照，执行 callback 变更 DOM 后再捕获新快照，最后在伪元素树上播放交叉淡入。

命名元素独立过渡：分配了 view-transition-name 的元素，其新旧快照会从默认 root 树中独立出来，在自身旧位置与新位置间平滑过渡（位置/尺寸动画）。

伪元素树结构：root → group(name) → image-pair(name) → old/new(name)。 group 管位置尺寸，image-pair 容纳新旧快照，old/new 是实际图像。

浏览器支持：同文档 Chrome 111+ / Safari 18+ / Firefox 136+；跨文档 Chrome 126+。不支持时降级为直接 DOM 变更，无副作用。

CSS 代码

/* 暂未为元素分配 view-transition-name */

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.4s;
  animation-timing-function: ease;
}

/* 暂未自定义伪元素动画 */

JS 触发代码

// 同文档视图过渡：在修改 DOM 前调用 startViewTransition
// 浏览器自动捕获旧快照，callback 执行 DOM 变更后捕获新快照
function toggleState() {
  if (!document.startViewTransition) {
    // 不支持的浏览器降级为直接变更
    applyStateChange();
    return;
  }
  const transition = document.startViewTransition(() => {
    applyStateChange(); // 在此执行 DOM 变更
  });
}

常见问题

什么是 CSS view-transition 视图过渡？它解决了什么问题？

view-transition 视图过渡（View Transitions API）是浏览器原生的视图切换动画机制—— 通过自动捕获新旧 DOM 快照并在伪元素树上播放交叉淡入，实现状态/页面间的平滑过渡，无需手动编写过渡动画。
它解决的核心痛点是：状态切换的动画一致性。传统方案要么用框架过渡组件（增加体积与复杂度），要么手动监听 DOM 变更写动画（难以对齐新旧位置）。view-transition 让浏览器接管快照与动画，开发者只需调用 document.startViewTransition(() => { /* DOM 变更 */ })，浏览器自动捕获旧快照、执行变更、捕获新快照、播放过渡。
三大优势：一是声明式，不依赖框架，原生 API；二是性能好，快照在合成线程处理，不掉帧；三是支持命名元素独立过渡，可实现共享元素动画等复杂效果。

同文档过渡（SPA）与跨文档过渡（MPA）有什么区别？如何选择？

两者是 view-transition 的两种模式，适用场景不同：
同文档过渡（same-document，SPA）：在单页应用内切换状态时使用。通过 JS 调用 document.startViewTransition(callback) 触发，callback 内执行 DOM 变更。适合：Tab 切换、列表/详情切换、主题切换、侧栏展开等 SPA 内部状态变化。
跨文档过渡（cross-document，MPA）：在多页应用页面跳转时使用。通过 CSS 声明 @view-transition { navigation: auto; } 启用，浏览器在页面导航时自动捕获旧页快照并在新页播放过渡。适合：传统多页站点、SSR 应用的页面间跳转。
选择原则：应用是 SPA（客户端路由）用同文档，是 MPA（真实页面跳转）用跨文档。注意跨文档过渡要求 Chrome 126+，兼容性晚于同文档（Chrome 111+）。

view-transition-name 是什么？为什么说它是"命名元素独立过渡"的关键？

view-transition-name 是视图过渡的核心属性——为元素分配一个唯一名称，让该元素从默认的整页 root 快照中独立出来，单独参与过渡。
未命名元素：归入 ::view-transition-old(root) 与 ::view-transition-new(root)，随整页一起交叉淡入。
命名元素：如 .card { view-transition-name: card; }，浏览器单独捕获其新旧快照，放入 ::view-transition-group(card) → ::view-transition-image-pair(card) → ::view-transition-old(card) / ::view-transition-new(card) 伪元素树。 group 会自动在元素的旧位置与新位置间插值（位置、尺寸动画），实现"共享元素过渡"效果。
典型应用：列表项点击展开为详情——列表态与详情态的图片都命名 view-transition-name: hero，切换时图片在新旧位置间平滑过渡，而非简单淡入。注意：同一时刻每个 name 只能对应一个元素，否则过渡跳过该 name。

::view-transition-* 伪元素树结构是怎样的？如何自定义动画？

视图过渡通过伪元素树渲染，结构为：
::view-transition（根，覆盖整页）
→ ::view-transition-group(name)（命名元素的组，管位置/尺寸动画）
→ ::view-transition-image-pair(name)（新旧图像对容器）
→ ::view-transition-old(name)（旧快照）与 ::view-transition-new(name)（新快照）
自定义动画：通过为伪元素设置 animation-duration、 animation-timing-function、transform、opacity 覆盖默认动画。例如让旧快照向左滑出、新快照从右滑入：
::view-transition-old(card) { animation: slide-out 0.3s forwards; }
::view-transition-new(card) { animation: slide-in 0.3s forwards; }
未命名的整页元素用 ::view-transition-old(root) 与 ::view-transition-new(root)。本工具支持为每种伪元素单独配置时长、缓动、transform、opacity，实时生成对应 CSS。

同文档过渡如何用 JS 触发？startViewTransition 的回调里应该做什么？

同文档过渡通过 document.startViewTransition(callback) 触发，callback 内执行 DOM 变更。完整流程：
1. 浏览器捕获当前 DOM 的旧快照（渲染状态截图）；
2. 调用 callback，开发者在其中修改 DOM（如切换 class、替换 innerHTML、更新状态）；
3. 浏览器捕获新 DOM 的新快照；
4. 在伪元素树上播放过渡（默认交叉淡入）；
5. 过渡结束，伪元素移除，新 DOM 正常显示。
典型代码：
function toggle() {
if (!document.startViewTransition) { applyChange(); return; }
document.startViewTransition(() => applyChange());
}
注意：callback 内的 DOM 变更应是同步的，异步变更（如 fetch 后更新）需用 transition.ready.then() 或 Promise。返回的 transition 对象有 finished、ready、updateCallbackDone 三个 Promise 可监听各阶段。

跨文档过渡如何启用？@view-transition 规则怎么写？

跨文档过渡（MPA 场景）通过 CSS 声明启用，无需 JS：
@view-transition {
navigation: auto;
}
将此规则加入 CSS 后，浏览器在同源页面导航（a 标签跳转、history 导航）时自动捕获旧页快照，新页加载后播放过渡。
同源限制：仅在同源（同协议/域名/端口）跳转时生效，跨源跳转无过渡。
命名元素跨页：若新旧页面都有 view-transition-name: hero 的元素，该元素会在两页间独立过渡（共享元素效果），实现列表页 → 详情页的图片平滑放大。
兼容性：跨文档过渡 Chrome 126+（2024）支持，晚于同文档（Chrome 111+）。 Safari/Firefox 逐步跟进。不支持的浏览器忽略该规则，正常跳转无副作用。

view-transition 与 CSS transition / animation 有什么区别？何时该用哪个？

三者定位不同：
CSS transition：元素属性变化时的过渡（如 hover 改颜色）。适合单个元素的属性级动画，需明确起止状态。
CSS animation：基于 @keyframes 的时间驱动动画。适合循环、多阶段、复杂路径动画，不依赖状态切换。
view-transition：DOM 状态/页面切换时的视图过渡。适合整页或元素在新旧状态间的过渡，浏览器自动捕获快照，开发者无需定义起止状态。
选择原则：
- 单个元素属性变化（hover、focus）→ transition
- 循环或复杂关键帧动画（loading、脉冲）→ animation
- DOM 结构变化（列表重排、状态切换、页面跳转）→ view-transition
view-transition 的独特价值是快照机制——即使新旧 DOM 结构完全不同（如列表变详情），也能通过命名元素实现位置平滑过渡，这是 transition/animation 难以做到的。

这个工具的预览安全吗？数据会上传吗？

完全安全，零数据上传。本工具的所有操作在浏览器本地完成：
- 过渡模式配置、命名元素管理、伪元素动画覆盖、CSS/JS 代码生成、预览渲染全部在浏览器内存中完成，不发起任何网络请求。
- 预览区使用 iframe 的 srcdoc 属性渲染，样式与 HTML 完全隔离在 iframe 内，不会影响主页面样式，也不会被主页面样式污染。
- iframe 设置了 sandbox="allow-same-origin allow-scripts" 属性——允许脚本以触发 startViewTransition，但禁止表单提交、弹窗、父页面访问等敏感能力。
- 生成的视图过渡 CSS 与 JS 代码仅在你本地浏览器中，点击复制按钮才会写入剪贴板。
无需注册、无需登录、无 Cookie 追踪、无广告，适合处理任何 CSS 练习与生产场景。