仅用 opacity 不够，因元素仍占流、可聚焦、响应点击；需配合 visibility 控制交互、transform: scaleY() 实现无抖动展开动画，且须设 transform-origin: top、transition 时序对齐、position 配套约束。
为什么只用 opacity 不够，必须配 visibility 和 transform
纯 opacity: 0 的元素仍占文档流、可被聚焦、能响应点击——这会让下拉菜单“看不见但点得着”，交互错乱。而 display: none 直接让 transition 失效，动画根本不会触发。真正可用的组合是：opacity 控制渐变、visibility 控制交互开关、transform: scaleY() 模拟向下展开位移。三者缺一不可。
transform: scaleY() 展开动画怎么写才不抖、不炸开
关键不是“放大”，而是“从顶部向下拉伸”。必须显式设置 transform-origin: top，否则缩放中心默认在元素中点，看起来像突然弹出或边缘模糊。旧版 Safari 对 scaleY(.99) 这类亚像素值渲染异常，所以起始值必须是 scaleY(0)，终点是 scaleY(1)。
- 初始状态：
opacity: 0; visibility: hidden; transform: scaleY(0); - 展开状态：
opacity: 1; visibility: visible; transform: scaleY(1); - 过渡写法：
transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease; - 父容器需设
position: relative，子菜单设position: absolute，否则transform会脱离预期位置
max-height 过渡看似简单，实际容易踩哪些坑
它依赖预设一个“足够大”的值（比如 max-height: 500px），但这个值一旦小于真实内容高度，就会裁剪或强制滚动；设太大又导致动画变慢、收尾拖沓。更麻烦的是：如果下拉项动态增减（比如 JS 插入新 <li>），你无法实时重算 max-height，动画就失真。
- 不推荐用于选项数量不确定的场景（如搜索建议下拉）
- 若坚持用，务必配合
overflow: hidden父容器，否则超出部分会漏出来 -
max-height从0到500px的过渡，缓动函数要和opacity严格对齐，否则出现“先闪出再淡入”
延迟淡出 + 防止悬停中断，纯 CSS 能做到吗
可以，但必须靠 visibility 的过渡时序控制，不能依赖 pointer-events——后者无法用 transition 动画。核心技巧是：让 visibility 的过渡延迟比 opacity 长，例如 opacity 0.3s ease + visibility 0.3s 0.3s（后一个 0.3s 是延迟）。这样鼠标移开后，先等 0.3s 再开始隐藏，期间再次悬停就能打断淡出。
立即学习“前端免费学习笔记（深入）”；
- 初始状态：
transition: opacity 0.3s ease, visibility 0.3s 0.3s; - 悬停状态：
opacity: 1; visibility: visible; - 注意：不要给
pointer-events加 transition，它不支持动画，写了也无效
transform-origin 和 position 的配套约束——漏掉任一环，动画就卡顿、错位或交互失效。 
