CSS transition 对 display 无效，因其为离散属性，无中间状态可插值；应改用 opacity、visibility 和 transform 协同控制：opacity 实现淡入淡出，visibility 控制交互开关，transform 负责位移或缩放动画。
为什么直接写 display: none 会导致动画失效
因为 display 是离散属性，浏览器不支持对其做过渡动画。哪怕你写了 transition: display 0.3s，它也完全没反应——切换瞬间完成，菜单“啪”一下弹出来。这不是你 CSS 写错了，是 CSS 规范本身就不允许。
正确写法：用 opacity + visibility + transform 三件套
这三者分工明确：opacity 控制淡入淡出，visibility 控制是否可交互（避免透明时还能点），transform 负责位移或缩放，让动画有“动起来”的感觉。
-
opacity必须从0到1，不能跳变；过渡时间建议0.25s～0.3s，太长显拖沓，太短像闪屏 -
visibility本身不可动画，所以不能写transition: visibility；它只起开关作用——初始设visibility: hidden，hover 时改visibility: visible -
transform: translateY(-10px)或scaleY(0.8)做初始偏移/缩放，hover 时还原为translateY(0)或scaleY(1)，配合transform-origin控制缩放锚点 - 过渡声明必须写在基础选择器上，比如
.dropdown-content，而不是只写在.dropdown:hover .dropdown-content里
容易被忽略的坑：鼠标移出时菜单闪退
常见现象是鼠标刚离开父菜单项，下拉框就立刻消失——不是动画问题，是触发区域断开了。根本原因是父项和下拉项之间存在像素级空隙，鼠标经过时短暂“悬空”，触发了 :hover 失效。
- 给父容器加
position: relative，下拉项用position: absolute; top: 100%; left: 0紧贴底部 - 必要时用伪元素补缝：
.dropdown::after { content: ""; position: absolute; top: 100%; left: 0; width: 100%; height: 10px; pointer-events: none; } - 别依赖 JS 动态插入下拉结构——DOM 必须提前存在，否则 transition 没有“持续存在”的上下文，动画会丢帧
移动端点击后菜单一闪即收，怎么 fix
这是事件冒泡惹的祸。点击展开后，事件继续往上冒，触发了全局监听的 click 关闭逻辑（比如遮罩层或 body click handler），而你的菜单还没来得及响应。
立即学习“前端免费学习笔记（深入）”；
- 在菜单触发元素（如
<button>或<a>）上加event.stopPropagation() - 或者更稳妥：用
pointer-events: none临时禁用下拉区外的点击穿透（仅限纯 CSS 方案不适用时） - 避免用
display: none配合 ARIA 控制可访问性——aria-hidden="true"应与visibility: hidden同步，否则屏幕阅读器会读到不可见内容
