视图过渡
View Transition
别名:视图过渡页面过渡动画切换动画换页过渡view transitionview transitions api
这是什么
用浏览器原生 View Transitions API 在页面状态切换时做平滑过渡：旧视图淡出、新视图淡入，关键元素可共享形变。它把状态跳变藏进连续的空间叙事，让"换了一屏"读起来像"移了一步"，而不是硬切。
交互实验室
试一试，再决定怎么用正在加载演示…
✓ 适用场景
- 同文档内状态或路由切换需要连续感（列表↔详情）
- 存在应保持视觉连续的关键元素（标题、图片、按钮）
- 目标浏览器已支持 View Transitions API
✕ 不适用场景
- 每次切换都播长动画，高频导航会被拖慢
- 旧新视图结构差异过大，形变会扭曲内容
- 需要兼容无 API 环境且不愿做回退分支
常见形式
交叉淡入
Cross-fade
旧淡出新淡入，最稳妥的默认
滑动
Slide
沿导航方向推入推出，前进后退语义清晰
共享轴
Shared-axis
共同元素原地形变，其余沿轴移动
实现要点
@keyframesopacitytransform: translateview-transition-name原生路径用 document.startViewTransition(() => updateDOM())，为需形变的元素指定 view-transition-name。无 API 时用 CSS animation 兜底：旧视图 fade/slide 出、新视图入， 时长一律 calc(<时长> * var(--demo-speed, 1))。尊重 prefers-reduced-motion，退化为瞬时切换。
平台 API
document.startViewTransition()view-transition-name交给 AI
四层 Prompt 从「它是什么」一路写到「可直接执行的任务」；切到 Agent 任务层，还能叠加视觉风格与附加要求，再一键复制给你的 Coding Agent。
在当前项目中实现视图过渡。 先检查现有组件体系和 Design Token，优先复用当前组件。 保持现有项目视觉风格。不要新增不必要依赖。 要求： - 状态或路由切换有连续过渡，关键元素保持视觉连续 - 无 View Transitions API 时有 CSS 兜底 - 所有动画时长写 calc(<时长> * var(--demo-speed, 1)) - 尊重 prefers-reduced-motion 完成后运行项目现有检查，并列出修改的文件。 附加要求： - 支持深色模式 - 尊重 prefers-reduced-motion - 不新增依赖 - 完成后运行现有检查并列出修改文件
可直接交给 Coding Agent，可叠加风格与附加要求
相关概念
页面之间切换时，旧页面滑出或淡出、新页面滑入或淡入，让路由跳转 从"硬切"变成一段 200～400ms 的连续运动。方向应与信息层级一致： 进入下级页面向左推入，返回时向右退出，帮助用户建立空间心智模型。
动效替代方案列表里的缩略图或卡片在打开详情时"飞"成详情页主图—— 同一个元素跨两个视图连续运动， 而不是各自出现。 元素身份在转场中保持连续， 是最强的上下文延续。
动效相似概念一个图标在两种状态间平滑变形，而不是替换—— 最经典是汉堡三横变关闭叉。 用同一组线条的旋转、位移与透明度组合完成， 传达"同一个控件换了状态"。
动效搭配使用