状態間のトランジション · A から B へ
ボトムシート底部抽屉
- 下端から上がる
- 指に従う
- 速度で決まる
層が下端から上がり、後ろのページは暗くなり少し引きます。グラバーを掴んで下げるとシートは指に正確に従います。離したときに戻るか閉じるかを決めるのは位置ではなく速度です。ゆっくり下まで引いても戻り、素早く弾くと去ります。
使いどころ
モバイルの分岐操作、詳細、ピッカーに使います（ページ遷移より軽く、ダイアログより重い）。デスクトップでは使わないでください。画面下端から上がる層はマウス環境では遠く扱いにくいです。そこはポップオーバーです。
パラメータ
on open · transform: translateY 100%→0 · backdrop opacity 0→0.32 · 380ms cubic-bezier(0.22, 1, 0.36, 1) · dismiss if release velocity > 0.5px/ms
レシピ
ボトムシート → on open · transform: translateY 100%→0 · backdrop opacity 0→0.32 · 380ms cubic-bezier(0.22, 1, 0.36, 1) · dismiss if release velocity > 0.5px/ms
AI に渡す一文
ボトムシートを作ってください。開くときは translateY(100%) から 0 へ上がり、背景は opacity 0 から 0.32 へ、380ms の cubic-bezier(0.22, 1, 0.36, 1) で。ドラッグ中は 1:1 で指に従い（イージングを掛けない）、離した瞬間の速度で判断します。0.5px/ms を超えたら閉じ、そうでなければ戻します。距離だけで判断しないでください。