状态之间的转换 · A 变成 B
底部抽屉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
配方
底部抽屉 → 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 就关掉，否则弹回 —— 不要只看拖了多远。