View Transitions 是前端检查清单项目 thedaviddias/front-end-checklist 中的一条技能，主题是使用 View Transitions API 实现平滑的页面与组件过渡。
【用途】 网页应用在切换页面时瞬间跳变，是用户最容易感知的性能体验问题之一。平滑过渡有助于用户在导航过程中保持上下文，理解自己从哪里来、要到哪里去。以往实现这种效果需要复杂的 JavaScript 动画库；View Transitions API 以原生方式提供该能力，代码成本大幅降低。
【主要能力】 该技能提供快速参考、检查、修复、解释与代码审查五个方面的指导。 快速参考要点包括：将 DOM 变更包裹在 document.startViewTransition() 中以实现同页过渡；为需要独立动画的元素（而非整个页面）添加 view-transition-name；使用 @starting-style 与 ::view-transition-* 伪元素自定义动画；在 CSS 中用 @view-transition { navigation: auto } 启用跨文档过渡。 检查项：确认站点在页面与组件过渡上使用的是 View Transitions API 还是 JavaScript 动画库。 修复方式：对 SPA 路由变化使用 document.startViewTransition() 实现视图过渡，或对 MPA 跨文档导航使用 @view-transition。 解释内容：说明 View Transitions API 如何捕获前后快照并在其间做动画，以及 view-transition-name 如何实现共享元素过渡。 代码审查要点：检查过渡实现是否缺少 prefers-reduced-motion 保护、是否存在重复的 view-transition-name 值（每份快照中必须唯一），以及可能在旧状态与新状态间造成布局抖动（layout thrash）的过渡。
【使用方式】 该技能以“规则”形式组织，先给出快速参考，再按检查、修复、解释、代码审查四类任务给出具体做法。完整实现细节、代码示例与框架相关指引参见 references/rule.md。规则页面地址为 https://frontendchecklist.io/en/rules/css/view-transitions。
【适用场景】 适用于需要添加页面过渡动画、图像展开/收缩效果、共享元素过渡，或需要改善单页应用（SPA）等导航用户体验的前端开发场景。
【限制】 关于该技能的收费、价格、支持平台、实际效果与具体使用步骤等信息，资料暂未提供，因此不在本介绍中作任何推断。