要实现果冻感，需用高过冲贝塞尔曲线如cubic-bezier(0.68,-0.48,0.27,1.55)，负y1触发反向收缩，y2>1增强回弹；仅作用于transform/opacity，配合requestanimationframe、will-change和pointer-events控制确保流畅。
贝塞尔曲线怎么写进 CSS transition 才有果冻感
果冻效果本质是「过冲 + 回弹」，纯 cubic-bezier(0.25, 0.46, 0.45, 0.94) 这类常见值只能模拟轻微弹性，不够“抖”。真正要出果冻感，得用高过冲值：比如 cubic-bezier(0.68, -0.55, 0.27, 1.55) —— 注意中间两个参数一负一超 1，这是关键。
常见错误是直接套用 easing 工具网站推荐的“弹性”预设，结果动效发飘或卡顿。原因在于：负的 y1 会让动画先反向收缩（菜单微缩一下再弹出），而 y2 > 1 则强制拉长回弹段，形成肉感抖动。
- 只对
transform和opacity做该贝塞尔动画，避免触发动画重排（如height、margin） - 过渡必须绑定在菜单容器本身，而非子元素；否则各层叠加会削弱果冻节奏
- 移动端 Safari 对负贝塞尔支持不稳定，建议加一层
@supports (transition-timing-function: cubic-bezier(0, 0, 0, 0))检测后降级
下拉菜单展开时如何避免“抽搐”或“跳帧”
果冻效果一旦卡顿，立刻变 bug。最常触发跳帧的是：DOM 渲染未就绪就开启动画，或 layout 触发太密。
典型场景：点击按钮后立即 classList.add('open')，但此时下拉内容还没完成渲染（比如含动态加载的列表项），transform 动画就已开始计算尺寸。
立即学习“前端免费学习笔记（深入）”；
- 确保动画只在内容 DOM 完整挂载后才触发，可用
requestAnimationFrame包一层状态更新 - 给菜单容器设
will-change: transform，但仅在 hover/click 瞬间设置，动画结束立刻移除，避免持续占用 GPU 内存 - 禁用
pointer-events直到动画完成（transitionend后设回），防止用户连点导致状态错乱
为什么用 transform 而不是 height 实现果冻下拉
height 动画无法用贝塞尔曲线做出真实果冻感，因为浏览器对 height 的插值是线性的（即使写了 cubic-bezier），且每次重排都强制触发 layout，性能差、易卡。
果冻效果依赖「连续、高帧率、无 layout 的位移变形」，只有 transform: scaleY() 或 translateY() 满足条件。
- 用
scaleY(0)→scaleY(1)配合transform-origin: top，比 translateY 更易控制“从顶部挤出”的物理感 - 若内容高度不固定，别硬算 scaleY 比例；改用
max-height+overflow: hidden做兜底，但动画主体仍走 transform - 注意：scaleY 会影响子元素内文字渲染清晰度（尤其小字号），可加
transform: translateZ(0)强制 GPU 加速修复
Safari 下果冻动画突然变僵硬的排查点
macOS / iOS Safari 对负贝塞尔的支持有隐藏限制：y1 0.6 时，部分版本会静默降级为 ease，果冻感完全消失。
这不是 bug，是 WebKit 的安全裁剪策略——它会把非法贝塞尔值截断为合法范围，比如把 -0.55 改成 0，导致动画失去反向收缩段。
- 实测可用的安全负值上限是
-0.48（如cubic-bezier(0.68, -0.48, 0.27, 1.55)） - 用
getComputedStyle(el).transitionTimingFunction在控制台检查实际生效的值，确认没被篡改 - 真要强兼容，可检测
typeof CSS.supports === 'function' && CSS.supports('transition-timing-function', 'cubic-bezier(0.68, -0.55, 0.27, 1.55)')，失败则切回较保守的cubic-bezier(0.5, 0, 0.5, 1)
果冻效果的复杂点不在曲线本身，而在「让浏览器老老实实按你写的负值去算」——这点在 Safari 里永远要多验一次。
