页面转场
Page Transition
初级通用页面转场（Page Transition）是从一个页面切到另一个页面时的过渡动画，比如进入详情页时新页面从右边推进来，返回时再沿原路退回去。它让用户感觉到自己是「往里走了一层」还是「退回来了」，在多层页面之间不容易迷路。
你可能会说：「App 里点进详情再返回，画面都是一闪就换了，能不能做成手机上那种推进来、退回去的效果？」
读之前建议先了解
动手看看进去了还是退回来了
要点页面转场是怎样起作用的？
- 1
方向在告诉用户「往哪走了」
手机 App 的习惯是：进入下一层时，新页面从右边推进来、旧页面往左让开；返回时反过来，当前页往右退出，上一层从左边回来。用户靠这个方向判断自己在第几层。最容易做错的是不分前进后退，统一从右边进：点了返回，画面却像又进了一层，比没有转场更误导人。
- 2
同一层级之间用淡入或不动
底部标签栏在「首页」「消息」「我的」之间切换，它们是平级的，没有谁在谁里面，用推进效果就会暗示错误的层级。这类切换一般直接切换，或者用很短的淡入淡出。所以选转场之前，先想清楚两个页面是上下级还是平级。
- 3
短，而且不挡操作
页面转场一般 200~350 毫秒。太长的转场每切一次页都要等，连续返回两层就是一秒多的空等。转场进行时用户也应该能接着点返回，动画从当前位置直接转向，而不是排队放完。网页里可以用框架的路由动画或浏览器的 View Transitions 实现，不需要的话宁可不加。
容易混淆的地方
页面转场讲的是「整页之间怎么切换」；共享元素过渡是转场的一种特殊做法，让两个页面里的同一样东西（比如商品图）连续地从一处移到另一处。页面转场也不是加载状态：如果新页面的数据还没回来，转场放完后仍然要显示骨架屏或加载提示，不能靠拉长转场来掩盖等待。
什么时候用
适合用
- 做 App 或手机网页时，列表进详情、详情进评论这样的多层页面，用推进和退回表达层级。
- 做单页应用时，路由切换加一个短淡入，避免内容突然整块替换。
- 做多步表单时，下一步从右边进、上一步从左边回，让用户知道自己在流程的哪一步。
不适合用
- 底部标签栏之间的平级切换，别用推进效果；直接切换或短暂淡入即可。
- 新页面数据要好几秒才回来时，别把转场拉长来掩盖等待；转场照常放完，再显示加载状态。
- 后台管理系统里用户频繁来回切页时，别加大幅滑动；直接切换更高效。
练一练选一个答案，看看解释
你在做一个点餐 App：餐厅列表 → 餐厅详情 → 用户评价。哪种转场设计最合适？
让 AI 帮你做复制给 AI Agent 直接用
请给【有层级的页面，如：商品列表 → 商品详情 → 评价页】加上页面转场。先阅读路由配置和页面组件，弄清现在怎么切页、项目里有没有动画库，以及哪些页面是上下级、哪些是平级（如底部标签页）。要求：进入下一层时新页从右侧推入，返回时沿原路退回，方向要按前进还是后退区分，浏览器后退键也要正确；平级切换不用推入效果。时长 200~350 毫秒，动画进行中也能继续点返回。开启减少动效时改为直接切换或短淡入。沿用现有路由写法，不改无关代码。最后说明怎样手动验证前进、返回和浏览器后退三种情况的方向。