状態間のトランジション · A から B へ
方向を持ったトランジション有方向感的转场
- 空間の一貫性
- 明確
- 没入感
進むときは新しい画面が右から、戻るときは左から入ります。ユーザーの操作方向と一致させます。
使いどころ
ステップ形式のフローや階層をまたぐ遷移に使います。同階層のタブ切り替えなら「クロスフェード」で十分です。
パラメータ
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 にします。