- 列表 → 详情、相册 → 大图：两页里有同一个对象，用共享元素最划算。
- 标签页、步骤之间的前进 / 后退：用短位移说明方向。
- 用户抱怨“点进去以后不知道自己在哪、返回后列表位置丢了”。
动效 · 页面与滚动
页面转场Page Transition
转场要让用户看出从哪来、到哪去，250–350ms 内完成且过渡中随时能返回；浏览器不支持或开启减少动效时直接降级。
先在手机商城里点进去、马上点回来
四种转场各做一遍同一个任务：点商品进详情，详情一出来就点返回。看头图从哪来、屏幕会不会白一下、你的点击有没有被吞。
手机商城 · 进详情再马上返回
任务很简单：点一件商品进详情，详情一出现就马上点「← 返回」。换四种转场各做一遍，看手机屏幕上发生了什么、返回快不快。
列表页已稳定
- 1点一件商品进详情
- 2详情一出现就马上点「← 返回」
- 3换一种模式，重做一遍对照
- 这次会播
- 共享元素 300ms
- 从哪来到哪去
- 保留：缩略图直接长成头图
- 过渡中点返回
- ✓ 立即响应，可打断动画
- 降级
- —（未触发降级）
第 1 步：在手机里点一件商品。先用「共享元素」，看头图是不是从你点的那张缩略图长出来的。
从刚才的操作里提炼
你在手机框里看到的五件事，就是验收页面转场时要盯的五件事。
- 转场是在说明空间关系：「共享元素」里头图从你点的那张缩略图长出来、返回时又缩回原位，对象是连续的；「整页淡入」每次都先白一下，用户得重新找“我刚才在哪”。
- 时长 250–350ms：300ms 足够看清方向；「过长并锁定」的 900ms 让每次换页都像在等加载。
- 过渡中不锁操作、可中断：前三种模式里，动画没播完点返回会立刻回去；锁定模式下点击被吞、返回要等动画结束——这是“卡死感”的直接来源。
- 不支持或减动效要降级：勾上「浏览器不支持」，共享元素直接切换；勾上「减少动效」，变成 150ms 短淡入。内容、价格、返回按钮一个不少。
- 别让整页白屏闪：转场的目的不是“有动画”，而是不让用户丢失位置；白屏闪一下反而在制造断裂。
什么时候用、什么时候别用
先看用户在两个页面之间有没有“同一个东西”要追。
- 两页之间没有对应关系，硬加动画只是装饰，瞬切或短淡入就够。
- 高频操作（翻页、连续切换筛选）：每次都等 300ms 会累积成拖沓。
- 为了“掩盖加载慢”加长动画——应该解决加载，而不是锁住用户等动画。
怎么跟 AI 说、怎么验收
你不用写转场代码，但要把“对象、时长、不锁、降级”四件事说进需求里，再亲手点一遍。
“商品列表进详情用共享元素转场：缩略图平滑放大成详情头图，250–350ms；转场中返回、点击、输入都不锁；浏览器不支持 View Transitions 就直接切换；系统开启减少动效时改成短淡入；前进 / 后退表现一致，失败不留白屏。”
- 看方向：点一件商品，头图是不是从那张缩略图长出来的？返回时是否缩回原位？
- 手快测试：详情一出现就连点返回 3 次，应该立刻回去，不应该“没反应”。
- 看时长：AI 报告里的 duration 落在 250–350ms；看到 800ms 以上要追问。
- 降级：在系统设置或开发者工具里模拟“减少动态效果”，再用一个旧浏览器打开，功能都要完整。
- 浏览器返回键：用浏览器自带的后退 / 前进各点一次，不能出现白屏或卡在半路。
正反例：同一个“列表进详情”，只差一句需求
目标相同，差别只在你有没有把“不锁返回 + 降级”说清楚。
“列表进详情用共享元素转场（View Transitions），缩略图放大成头图，300ms；过渡中返回、点击不锁；不支持就直接切换，减动效改短淡入。”
用户一眼看出“我点的就是这件”，手快点返回也立刻回去，旧浏览器照常能用。
“页面切换加个酷炫转场。”
AI 可能写成 900ms 整页滑入并在过渡期间锁住点击：返回没反应、连点被吞、减动效用户照样晃，用户以为卡死。
快速自测
AI 给相册加了转场：点缩略图后大图从缩略图位置放大，用时 800ms，期间点“关闭”没反应。你验收时最该要求改什么？
继续查证
术语的技术定义和行为以这些一手或权威资料为准。
下一步学
和本知识点经常一起出现的概念。