页面切换过渡
Page Transition
别名:页面转场切换动画页面跳转动画转场效果路由过渡page switch animation
这是什么
页面之间切换时，旧页面滑出或淡出、新页面滑入或淡入，让路由跳转 从"硬切"变成一段 200～400ms 的连续运动。方向应与信息层级一致： 进入下级页面向左推入，返回时向右退出，帮助用户建立空间心智模型。
交互实验室
试一试，再决定怎么用正在加载演示…
✓ 适用场景
- SPA 路由切换、分步向导、tab 式页面流
- 需要表达页面间父子层级关系
- 原生 App 风格的 Web 产品调性
✕ 不适用场景
- 每次 300ms 以上的长过渡（拖慢浏览节奏）
- 用户频繁快速切换（动画跟不上点击）
- 传统多页站点整页刷新（没有过渡载体）
常见形式
推入
Push
新页从右推入、旧页左移，表达层级
淡入淡出
Cross-fade
两页交叉淡化，中性无方向
共享轴
Shared axis
Material 规范，进入与退出配对同轴运动
实现要点
transform: translateXopacitytransition最简做法：路由容器在切换时给旧页 class "exit"（translateX(-30%) + opacity:0）、 新页 "enter"（从 translateX(30%) 到 0），时长 250～300ms ease-out。 现代方案用 View Transitions API：document.startViewTransition 包裹路由更新， 一行代码获得交叉淡入淡出并可用 CSS 定制方向。注意尊重 prefers-reduced-motion。
交给 AI
四层 Prompt 从「它是什么」一路写到「可直接执行的任务」；切到 Agent 任务层，还能叠加视觉风格与附加要求，再一键复制给你的 Coding Agent。
为当前 SPA 的路由切换添加页面过渡。 先确认路由方案与页面容器结构。 要求： - 前进/返回方向相反的滑入淡出，280ms ease-out - 快速连续切换时不叠加错乱动画 - 首次加载不播放过渡 - 尊重 prefers-reduced-motion - 不引入新依赖 完成后运行现有检查，说明修改文件。 附加要求： - 支持深色模式 - 尊重 prefers-reduced-motion - 不新增依赖 - 完成后运行现有检查并列出修改文件
可直接交给 Coding Agent，可叠加风格与附加要求
相关概念
面板从屏幕边缘（常为右侧或底部）滑入并带遮罩，像从抽屉里拉出来。 转场方向即空间隐喻：从边缘滑入表示"叠加的临时层"， 关闭时原路滑回，保持心智模型不换。
动效相似概念覆盖在页面之上、带半透明遮罩的对话框，打断用户当前流程，要求先完成弹窗内的任务或决策。 遮罩阻断与底层页面的交互，焦点被暂时困在弹窗内，是容器类浮层中打断程度最高的一种。
组件应用于用一排可切换的标签把同一区域的内容分成互斥视图：标签头常驻可点击，仅当前 标签对应的面板可见，其余隐藏。适合把高度相关的几类内容压缩在同一区域内 就地切换，避免整页跳转。键盘上用左右方向键在标签间移动，是可访问性的经典范例。
组件应用于操作结果以一条短提示从屏幕边缘滑入（常为底部或右上角）， 停留数秒后自动滑出。 动效分三段：滑入—停留—滑出， 方向与来源一致——从边缘来，回边缘去。
动效相似概念