Transitions Between States · A turns into B
Bottom sheet底部抽屉
- rises from the edge
- follows the finger
- speed decides
A layer rises from the bottom edge while the page behind dims and steps back. Drag the grabber and the sheet tracks your finger exactly; on release, what decides whether it returns or closes is speed, not position — drag it slowly to the bottom and it springs back, flick it fast and it leaves.
When to use it
Use it on mobile for branching actions, detail views and pickers — lighter than a page push, heavier than a dialog. Avoid it on desktop: a layer rising from the bottom of the screen is both far away and awkward with a mouse. Use a popover there.
Parameters
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
Recipe
Bottom sheet → 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
One sentence for your AI
Build a bottom sheet: on open, the sheet rises from translateY(100%) to 0 while the backdrop goes from opacity 0 to 0.32, over 380ms cubic-bezier(0.22, 1, 0.36, 1). While dragging, the sheet tracks the pointer 1:1 with no easing; on release, decide from the release velocity — over 0.5px/ms it closes, otherwise it springs back. Never judge by distance alone.