状态之间的转换 · A 变成 B
有方向感的转场Direction-aware transition
- 空间一致
- 明确
- 不出戏
前进时新页面从右侧进入、返回时从左侧进入，方向和用户的导航动作保持一致。
什么时候用它
分步流程、多级页面之间导航时用它；平级的标签页切换用“交叉淡化”即可。
参数
280ms · ease-out · transform: forward translateX 24px→0, back translateX -24px→0
配方
有方向感的转场 → translateX 24px → 0 @ 280ms ease-out有方向感的转场 → translateX -24px → 0 @ 280ms
给 AI 的一句话
让页面转场有方向感：进入下一层时新页面从右侧 24px 滑入，返回时从左侧 24px 滑入，各 280ms，ease-out。