下拉菜单过渡动画应使用 max-height + overflow 替代 display 切换，因 display 不支持 transition；推荐设 max-height: 0 → 500px 配合 overflow: hidden，时长 0.2s~0.3s，并用 JS 控制类名与 aria-expanded 状态，避免纯 CSS 方案兼容性问题。
下拉菜单展开时没有过渡动画？用 max-height + overflow 替代 display 切换
直接对 display: none / block 加 transition 是无效的——CSS 过渡不支持 display 属性。真正能过渡的是 max-height、opacity、transform 等可计算值属性。
推荐做法：固定一个足够大的 max-height（比如 max-height: 500px），配合 overflow: hidden 控制裁剪。展开时从 max-height: 0 过渡到目标值；收起时反向过渡。
- 不要设
height: 0→auto，因为auto无法参与过渡 -
max-height值需略大于菜单最大可能高度（含 padding/margin），否则会截断 - 过渡时间建议
0.2s ~ 0.3s，太长显得拖沓，太短不易察觉
用 :focus-within 或 JavaScript 控制展开状态？优先选 JS + aria-expanded
CSS-only 方案（如用 :hover 或 :focus-within）在移动端不稳，且无法键盘导航、屏幕阅读器兼容差。真实项目中应由 JS 控制类名，并同步更新 aria-expanded 属性。
示例逻辑：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
// 点击按钮切换下拉状态
button.addEventListener('click', () => {
const isExpanded = menu.getAttribute('aria-expanded') === 'true';
menu.setAttribute('aria-expanded', !isExpanded);
menu.classList.toggle('open');
});
- 避免只依赖
:hover，它在触摸设备上不可靠 - 必须设置
aria-expanded和aria-controls，否则视障用户无法感知状态变化 - 用
classList.toggle()比手动操作className更安全
transform: scaleY() 动画看起来“抖”？补上 transform-origin 和 will-change
如果用 transform: scaleY(0) → scaleY(1) 实现缩放式下拉，元素默认以中心为原点缩放，导致内容“上下晃动”。同时，未声明 will-change: transform 可能触发重排，动画卡顿。
- 加
transform-origin: top让缩放从顶部开始，视觉更自然 - 给菜单容器加
will-change: transform（仅动画期间），提示浏览器提前优化渲染层 - 慎用
scaleY处理含表单控件（如<input>）的菜单——缩放可能影响点击热区
过渡结束后 DOM 还在？记得清理 max-height 回退逻辑
用 max-height 过渡时，收起动画完成后的 max-height: 0 仍存在，可能干扰后续 JS 计算（比如 getBoundingClientRect()）。更稳妥的做法是监听 transitionend 事件，在收起完成时移除内联样式或添加 hidden 属性。
- 监听事件要过滤非目标属性：
if (e.propertyName !== 'max-height') return - 收起后可设
menu.style.maxHeight = ''清空内联样式，回归 CSS 定义 - 若用
hidden属性，需确保对应 CSS 有[hidden] { display: none }
