返回
UI · №31 · SPECIMEN
页面转场Page Transition
页面跳转时淡一下登录成功后怎么切到后台路由切换不要一闪一闪新页面出现时加什么动画
LIVE SPECIMEN真的能玩，点点看
180ms CROSSFADE
先看结论
页面转场是两个路由或完整视图之间的状态交接。它的任务是说明“页面已经换了”，同时保持方向感、焦点和阅读位置，不是给每次点击加一段片头。
- 适合
- 路由切换有明显上下文变化，或新内容需要短暂加载时；例如登录进入后台、图片详情切回列表、同层级内容前后切换。
- 不适合
- 普通链接已经瞬间完成，或高频工具每次切换都会被动画拖慢时。无意义的整页滑入会让导航显得迟钝。
直接发给 agent
Add a restrained page transition for navigation between [source route] and [destination route].
Requirements:
- Default transition: 180ms crossfade using opacity only
- Do not delay navigation to finish an exit animation
- Keep browser back/forward navigation working
- Preserve scroll position when returning to a list; otherwise move focus to the new page heading
- Use the View Transitions API only as progressive enhancement with a normal navigation fallback
- Under prefers-reduced-motion: reduce, render the destination immediately with no transform or scale animation
- Loading and error states must remain separate from the transition
技术标注5 项
- 默认方案
- 无转场，或 150-220ms opacity crossfade
- 可动画属性
- 只动 transform / opacity，避免 width / height / top / left
- 浏览器能力
- View Transitions API 渐进增强，保留普通导航 fallback
- 无障碍
- prefers-reduced-motion: reduce 时取消位移和缩放
- 焦点管理
- 导航完成后把焦点放到新页面主标题或 main
详细说明
页面转场的判断单位是“视图有没有换”，不是“有没有东西出现”。Modal 出现属于组件入场，列表筛选属于内容更新，只有路由或完整视图交接才需要讨论 Page Transition。
默认从无动画开始
页面能在一次普通导航中快速、稳定地出现，就不需要额外转场。确实需要连接前后视图时，先用 150-220ms 的淡入淡出。它没有方向暗示，适合大多数同层级页面。
只有空间关系明确时才加位移：
- 列表进入详情：详情可轻微向前推进。
- 详情返回列表：恢复原滚动位置比反向动画更重要。
- 登录进入后台：短暂 crossfade 足够，目标页面本身就是成功反馈。
转场、加载、反馈是三件事
- 转场说明视图已更换。
- Loading 说明内容还没准备好。
- Toast 或 Alert 说明操作结果或异常。
登录成功后直接进入后台，通常不需要再弹“登录成功” Toast。登录失败则不能靠页面不动让用户猜，要明确显示错误反馈。
实现顺序
- 先保证普通链接、浏览器前进后退和刷新可用。
- 再处理新页面标题的焦点，让键盘与读屏用户知道上下文已变化。
- 保留列表返回时的滚动位置。
- 最后才用 View Transitions API 或框架转场做渐进增强。
减弱动效
prefers-reduced-motion: reduce 下去掉位移、缩放和视差。页面直接出现不是降级失败，而是正确响应用户偏好。即使保留淡入，也应极短且不阻塞交互。
常见翻车
- 所有页面都从右侧滑入，制造了不存在的空间层级。
- 先播放 500ms 离场，再开始请求数据，导航被人为拖慢。
- 转场期间锁住浏览器返回键或丢失 URL。
- 返回文章列表后滚回顶部，用户失去原来的阅读位置。
- 用转场遮住空白等待，却没有真实 Loading 和 Error 状态。