纯 CSS 弹簧抽屉需用 transform + cubic-bezier() 模拟弹性，禁用 height/max-height 避免重排，Safari 需微调贝塞尔参数，配合 JS 锁状态与焦点管理确保体验真实。
用 transform + transition-timing-function: cubic-bezier() 模拟弹簧回弹
纯 CSS 实现“弹簧感”抽屉，核心不是靠 JS 物理引擎，而是用高阶贝塞尔曲线逼近弹性函数。CSS 原生不支持 spring()（直到 transition-timing-function: spring(mass, stiffness, damping, velocity) 进入 Chrome 125+，但 Safari/旧版 Firefox 完全不支持），所以目前最稳的方案仍是手调 cubic-bezier(0.17, 0.67, 0.83, 0.67) 这类经典“过冲-回弹”曲线。
关键点在于：动画不能只作用于 height（会触发重排，卡顿且无法硬件加速），必须用 transform: translateY() 配合 overflow: hidden 容器来实现位移+裁剪。
- 抽屉容器设
overflow: hidden，子元素用transform: translateY(-100%)初始隐藏 - 展开时设
transform: translateY(0)，收起时设transform: translateY(-100%) - 过渡函数选
cubic-bezier(0.22, 0.61, 0.36, 1)—— 比常见“弹跳”曲线更克制，避免视觉廉价感 - 务必加
will-change: transform触发 GPU 加速，尤其在移动端
为什么不用 max-height 动画？
max-height 看似简单，但实际是“伪弹簧”陷阱：你没法给它配真正有回弹感的缓动，因为 max-height 从 0 → 500px 的过程本质是线性插值，即使套 cubic-bezier()，也只在数值层面变速，缺乏位移过冲（overshoot）和惯性回弹的真实物理反馈。
更严重的是性能问题：max-height 触发 layout，浏览器需反复计算高度、重排整个文档流，滚动中打开抽屉极易掉帧。
立即学习“前端免费学习笔记（深入）”；
- 实测：同设备下
transform动画帧率稳定 60fps；max-height在 iOS Safari 上常跌破 30fps - 若内容高度不确定，用 JS 测高后设为
transform的目标位移值，比硬编码max-height更可靠 - 别试图用
height: auto+transition—— CSS 不支持auto的过渡，会直接跳变
处理 Safari 下 cubic-bezier() 表现偏差
Safari 对高阶贝塞尔曲线的插值算法和 Chrome 不一致，同一组参数在 Safari 中回弹幅度偏小、衰减更快，容易显得“没劲”。这不是 bug，是渲染引擎实现差异。
解决办法不是换库，而是针对性微调参数：
- Chrome 可用
cubic-bezier(0.22, 0.61, 0.36, 1)，Safari 建议改用cubic-bezier(0.18, 0.89, 0.32, 1.4)（增大第四参数让尾部上扬更明显） - 用
@supports (transition-timing-function: spring(1, 100, 10, 0))检测原生spring()支持，有则覆盖，无则 fallback 到贝塞尔 - 切忌用
-webkit-transition-timing-function单独 hack Safari —— 现代 Safari 已完全支持标准语法，加前缀反而可能被忽略
抽屉状态切换时的点击穿透与焦点管理
弹簧动画持续期间（通常 400–600ms），用户可能连续点击开关按钮，或按 ESC 关闭，若逻辑没锁住，会出现状态错乱：比如动画还没结束就又触发一次展开，导致 transform 值被覆盖，回弹中断、卡在半途。
纯 CSS 无法锁状态，必须配合极简 JS 控制开关节奏：
- 点击后立即将按钮设
disabled或加data-state="animating"标记 - 监听
transitionend事件（注意过滤transform属性，排除其他过渡干扰）再解锁 - 抽屉展开后，用
focus()聚焦第一个可交互元素，并设置inert属性禁用背景内容，防止键盘 Tab 穿透 - 别依赖
setTimeout估算动画时长 —— 用户系统性能、页面负载都会影响真实耗时
真正的物理质感不在曲线多复杂，而在于动画全程可控、状态不撕裂、打断响应及时。参数可以调，但锁状态和焦点管理漏掉一个，用户立刻觉得“假”。
