视图过渡 API
使用 CSS View Transitions API 创建流畅的页面和元素过渡动画。
视图过渡 API 是 CoddyKit 上的免费 CSS Academy 课时。 这是第 4 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 CSS Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 CSS Academy 课程共包含 4 节课。
什么是视图过渡应用程序接口？
视图过渡应用程序接口（Chrome 111+）支持在页面的不同状态之间或页面导航之间进行流畅的动画过渡。它会捕获前后状态的屏幕截图，并使用 CSS 动画在两者之间进行变形，从而让网页实现类似应用程序的过渡效果。
同文档过渡
将 DOM 更新包装在 document.startViewTransition(() => updateDom()) 中，即可触发同一页面内的过渡。浏览器会捕获旧状态、执行更新、捕获新状态，然后自动在两者之间进行交叉淡化。
<button id="update-btn">Update Content</button>
<div class="content">Before update</div>
默认交叉淡化
如果不使用任何 CSS，视图过渡会在页面的新旧状态之间执行简单的交叉淡化。这一行 JavaScript 代码就能添加精致的过渡效果，而过去实现这种效果需要复杂的 CSS 动画编排或专用动画库。
CSS 伪元素
该应用程序接口公开了四个伪元素：::view-transition（根覆盖层）、::view-transition-old(root)（旧页面屏幕截图）、::view-transition-new(root)（新页面屏幕截图）以及 ::view-transition-image-pair(root)。可以使用 CSS 动画自定义它们。
使用视图过渡名称的命名过渡
将 view-transition-name: hero-image 分配给在过渡前后都存在的元素。应用程序接口会将该元素从旧的位置和尺寸变形到新的位置和尺寸，从而自动创建流畅的元素级动画。
<div class="hero-img"></div>
自定义动画
可以在伪元素上使用自定义关键帧，覆盖默认的交叉淡化：向前导航时从右侧滑入，返回时从左侧滑入。使用 @keyframes 作用于 ::view-transition-new(root) 和 ::view-transition-old(root)。
MPA 过渡（导航应用程序接口）
跨文档视图过渡（Chrome 126+）可以在多页面应用的完整页面导航之间添加动画。在 CSS 中加入 @view-transition { navigation: auto; }，浏览器就会自动处理 HTML 页面之间的过渡，无需 JavaScript。
无障碍：尊重动画偏好
患有前庭功能障碍的用户不应体验动画效果过强的过渡。将过渡动画放在 @media (prefers-reduced-motion: no-preference) 中，这样对于偏好减少动画的用户可以禁用自定义动画，同时保留具有实际功能的 DOM 更新。
<p>This rule targets browser-generated <code>::view-transition-old(root)</code> and <code>::view-transition-new(root)</code> pseudo-elements — visible only during an active view transition, not in a static preview.</p>
SPA 框架集成
React 路由器 v6.4+、Vue 路由器和 Astro 支持视图过渡。框架会自动将路由变化包装在 startViewTransition 中。可以在导航和布局外壳等持续存在的元素上使用视图过渡名称，配置每条路由的过渡样式。
性能注意事项
视图过渡会捕获页面屏幕截图，对于复杂布局来说可能成本很高。包含许多合成层的大型页面在捕获期间可能出现卡顿。请将过渡持续时间控制在 300 毫秒以内，并避免对极其复杂的子树执行过渡。
渐进增强
使用前请检查应用程序接口是否可用：if (!document.startViewTransition) { updateDom(); return; }。回退方案会正常更新 DOM，不执行动画。视图过渡属于渐进增强：没有它，应用仍然可以运行；在受支持的环境中，它只是改善用户体验。
知识检查
在视图过渡期间，元素上的视图过渡名称可以实现什么效果？
总结
视图过渡应用程序接口只需少量代码，就能在 DOM 状态或页面导航之间实现交叉淡化和变形动画。命名的过渡元素会自动进行变形；自定义伪元素动画可以替代默认的交叉淡化。请尊重减少动画的偏好，并通过渐进增强兼容不支持它的浏览器。
常见问题解答
「视图过渡 API」课时是免费的吗？
是的 — 「视图过渡 API」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 CSS Academy 课程的其余内容，请升级到 CoddyKit PRO。 CSS Academy 课程共包含 4 节课。
「视图过渡 API」这节课中我会学到什么？
使用 CSS View Transitions API 创建流畅的页面和元素过渡动画。 你通过在浏览器中直接运行的动手代码来练习 CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 CSS Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 CSS Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 4 节课，共 4 节。
「视图过渡 API」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 CSS Academy 课中编写并运行代码吗？
能。每节 CSS Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。