用 display: none 切换菜单无法实现平滑过渡，必须改用 opacity、transform 和 visibility 组合并配 transition；因 display 无中间状态，不能插值，导致动画中断、闪现或消失。
直接说结论：用 display: none 切换菜单显隐，永远做不出平滑过渡。必须改用 opacity、transform 和 visibility 的组合，再配合适当的 transition 声明。
为什么 display: none 无法触发 transition
浏览器对 display 的处理是“开关式”的——它没有中间状态，不能插值计算。哪怕你写了 transition: all 0.3s，只要涉及 display: none ↔ block 切换，动画就断掉，表现为瞬间闪现或消失。
常见错误现象：
- 菜单点开时“啪”一下弹出来，收起时直接消失
- 加了
transition但完全没反应 - 用
setTimeout延迟添加类，结果还是卡顿
真正可动画的属性只有少数几个：opacity、transform、visibility（需配合 opacity 或 transform）、max-height（仅限已知高度场景）。
立即学习“前端免费学习笔记（深入）”；
下拉菜单推荐方案：opacity + transform + visibility
这是目前最稳妥、语义清晰、无障碍友好的组合。适用于悬停或点击触发的常规下拉菜单（如导航栏中的 “Products” → 子项列表）。
关键 CSS 写法：
.dropdown-content {
opacity: 0;
transform: translateY(-8px);
visibility: hidden;
transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s 0.25s;
}
<p>.dropdown:hover .dropdown-content,
.dropdown[aria-expanded="true"] .dropdown-content {
opacity: 1;
transform: translateY(0);
visibility: visible;
transition-delay: 0s;
}
注意点：
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
visibility: hidden必须配transition-delay，否则收起时会“跳”——先变透明再隐藏，避免布局抖动 - 不要只写
transition: all，它会意外触发动画重排（如 width、height 变化） - 移动端需额外监听
touchstart并用 JS 切换aria-expanded，否则 iOS Safari 悬停不生效
侧边/汉堡菜单推荐方案：transform + opacity + inert
这类菜单通常全屏覆盖，需要更严格的控制逻辑，尤其要兼顾键盘焦点和屏幕阅读器。
核心思路是把菜单“推”出视口，而不是删 DOM 或藏 display：
.mobile-menu {
position: fixed;
top: 0;
right: -100%;
width: 80%;
max-width: 320px;
height: 100vh;
opacity: 0;
visibility: hidden;
transform: translateX(100%);
transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.35s;
}
<p>.mobile-menu.open {
right: 0;
opacity: 1;
visibility: visible;
transform: translateX(0);
}
JS 配合要点：
- 切换类名后，立即设置
document.body.style.overflow = 'hidden'防止滚动穿透 - 菜单打开后，用
focus()把焦点移到第一个可聚焦元素（如第一个<a>） - 按
Esc键时，不仅要移除.open类，还要恢复inert属性和 body 滚动 - 别忘了给触发按钮加
aria-expanded和aria-controls
max-height 过渡的适用边界与坑
有人喜欢用 max-height 做下拉动画，它确实能“撑开”容器，但只适合内容高度固定或可预估的场景。
典型写法：
.submenu {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
<p>.submenu.active {
max-height: 300px; /<em> 必须是具体数值，不能是 auto </em>/
}
问题很现实：
- 子项数量一变，就得手动调
max-height值 - 字体大小缩放、行高变化、响应式断点切换时，高度容易溢出或截断
- 动画缓动函数对“高度增长”感知弱，视觉上不如
transform流畅
如果你真要用它，至少加个 JS 动态读取 scrollHeight 并内联设置，但那就绕不开 JS 介入了——不如直接上 transform 方案省事。
最容易被忽略的点是：所有动画都得配 will-change: transform, opacity（慎用，仅在性能瓶颈时加），以及移动端必须加 touch-action: manipulation 防止 300ms 点击延迟。过渡不是加了 transition 就万事大吉，每个属性的起始/结束值、触发时机、可访问性补全，缺一不可。
