下拉菜单用 transform: scaleY() 展开时从顶部塌陷，是因为默认 transform-origin 为 50% 50%，需设为 top center 实现从顶向下自然展开；配合 cubic-bezier 缓动、will-change 优化及 pointer-events 控制确保跨端稳定。
下拉菜单用 transform: scaleY() 展开时，为什么总是从顶部塌陷？
因为默认的 transform-origin 是 50% 50%（中心点），scaleY(0) 会让元素从中心向上下同时压缩，视觉上像“塌”进中间，不是从菜单项底部自然“展开”。要实现弹性下拉效果，必须把变形原点移到顶部边缘。
- 正确设置：
transform-origin: top center—— 这样scaleY(0)会从顶部开始收缩，scaleY(1)就是从顶向下“拉出”菜单 - 如果菜单容器有
overflow: hidden，记得给父容器加will-change: transform或transform: translateZ(0)，避免 Safari 下裁切异常 - 别用
top: 0+height: 0配合transition: height—— 高度无法 CSS 动画（除非设具体像素值），且无法触发 GPU 加速
transform-origin 的取值对动画起始位置的影响
它决定缩放、旋转等变换的“支点”，下拉菜单只关心垂直方向锚点。常见错误是写成 transform-origin: 0 0（左上角），但实际需要的是水平居中、垂直靠顶——否则菜单左右会偏移或撕裂。
-
transform-origin: top center✅ 最稳妥，适配多数定位方式（position: absolute或relative） -
transform-origin: 0 0❌ 左上角锚点，若菜单有left: 50%或transform: translateX(-50%)，展开时会错位 -
transform-origin: top⚠️ 等价于top center，可以写，但显式写全更防歧义 - 不要写成
transform-origin: 0% 0%—— 百分比在不同盒模型下行为不一致，尤其遇到box-sizing: border-box和 padding 时
配合 transition 实现弹性缓动效果
CSS 的 cubic-bezier() 能模拟弹簧感，但直接套用 ease-in-out 会显得生硬。关键在于让展开末尾带一点“回弹”余量，再小幅回调。
- 推荐贝塞尔曲线：
transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1)—— 比ease-out更轻快，收尾更利落 - 避免同时过渡
opacity和transform：若加了opacity: 0 → 1，需确保两者 duration 和 timing-function 完全一致，否则出现“先显后动”或“动完才显” - 展开前务必确保菜单初始状态是
transform: scaleY(0)且transform-origin已生效；否则第一次 hover 会跳变 - 用
will-change: transform提前提示浏览器该元素将动画，减少重排开销，尤其在滚动区域里嵌套下拉菜单时明显
移动端点击穿透和悬停失效怎么办
纯 :hover 在 iOS 和 Android 上不可靠：触摸屏没有“悬停”概念，tap 后伪类可能不触发或延迟，导致菜单闪退或点不中子项。
立即学习“前端免费学习笔记（深入）”；
- 必须用 JavaScript 切换 class（如
.is-open），而不是只依赖:hover - 给菜单触发元素（如
<button>）加touchstart事件监听，并preventDefault()，防止 iOS 点击延迟 - 菜单容器加
pointer-events: none初始态，展开时改为pointer-events: auto，避免未展开时误触子链接 - 别忘了用
@media (hover: hover)区分设备能力，PC 端保留:hover，触屏端强制走 JS 控制
transform-origin: top center，而是让所有设备上第一次点击就响应、菜单不被截断、缩放不触发文字重绘模糊、回弹不卡顿——这些细节藏在 transition 的 timing-function 选择、will-change 的放置时机、以及 pointer-events 的切换节奏里。 
