Transitions Between States · A turns into B
Direction-aware transition有方向感的转场
- spatially consistent
- clear
- immersive
Going forward the new view enters from the right; going back it enters from the left, matching the direction the user navigated.
When to use it
Use it for step flows and navigation between nested views; for switching between sibling tabs, “Crossfade” is enough.
Parameters
280ms · ease-out · transform: forward translateX 24px→0, back translateX -24px→0
Recipe
Direction-aware transition → translateX 24px → 0 @ 280ms ease-outDirection-aware transition → translateX -24px → 0 @ 280ms
One sentence for your AI
Make the page transition direction-aware: push enters from 24px on the right, pop enters from 24px on the left, 280ms ease-out each.