如何在CSS过渡前后切换display属性，实现兼具动画效果与可访问性的下拉菜单

我完全懂你这个头疼的问题——想让下拉菜单有丝滑的CSS过渡，又得保证键盘导航的可访问性，结果display属性直接把动画搞崩了，去掉display又藏不住菜单的焦点。结合你的情况（按钮和导航没共同父元素，只能靠JS切换.expanded类），这里有几个靠谱的解决方案，先从最贴合你需求的CSS优化说起：

一、优化CSS方案：用visibility+pointer-events替代display，兼顾动画与可访问性 #

你之前的核心矛盾是display无法过渡，且去掉display后隐藏的菜单仍能被键盘聚焦。我们可以用visibility和pointer-events替代display，配合max-height的过渡，一次性解决这两个问题：

调整后的CSS代码：

#main-nav>ul {
  max-height: 0;
  overflow: hidden;
  /* 注意：过渡属性要对应max-height，不是height！你之前代码里有个小bug */
  transition: max-height 0.5s linear;
  /* 收起状态：完全不可见+阻止所有交互 */
  visibility: hidden;
  pointer-events: none;
}

#main-nav>ul.expanded {
  max-height: 100vh;
  /* 展开状态：恢复可见+允许交互 */
  visibility: visible;
  pointer-events: auto;
}

为什么这能解决问题？

1. 动画正常生效：彻底移除了display属性，只通过max-height控制过渡，动画会丝滑触发；
2. 彻底阻止访问：
   • visibility: hidden会让元素及其子元素完全不可见，浏览器会自动阻止键盘聚焦到隐藏的子元素上；
   • pointer-events: none会阻止鼠标点击、hover等事件，进一步避免误操作；
3. 可访问性友好：配合少量JS同步ARIA属性（见下文），屏幕阅读器也能准确识别菜单的展开/收起状态。

二、补充可访问性：同步ARIA属性（轻量化JS） #

虽然CSS已经解决了视觉和交互问题，但为了让屏幕阅读器用户更好地理解菜单状态，建议在切换.expanded类的同时，更新两个关键ARIA属性——这部分JS非常轻量，只是同步状态，没有复杂的延时或DOM操作：

const toggleBtn = document.getElementById('main-nav-collapse-button');
const menuList = document.querySelector('#main-nav>ul');

toggleBtn.addEventListener('click', () => {
  const isExpanded = menuList.classList.toggle('expanded');
  
  // 菜单收起时告诉屏幕阅读器忽略它，展开时恢复
  menuList.setAttribute('aria-hidden', !isExpanded);
  // 告诉屏幕阅读器当前按钮对应的菜单状态
  toggleBtn.setAttribute('aria-expanded', isExpanded);
});

三、为什么不推荐用display配合过渡？ #

你之前想的“先/后切换display属性”的思路，其实很难用纯CSS实现——因为display是即时生效的，无法和过渡动画的时间线绑定。即使靠JS加延时，也容易出现动画卡顿、状态不同步的问题，尤其是用户快速点击按钮时。而上面的visibility+max-height方案，是目前前端社区公认的兼顾动画和可访问性的最佳实践。

小提醒：修复过渡属性的小bug #

你之前的CSS里写了transition: height 0.5s linear，但实际控制的是max-height，这会导致动画不触发——把过渡属性改成max-height就能正常工作啦。

内容来源于stack exchange