侧边导航栏展开子菜单时CSS transition过渡效果不生效

给.sub-menu添加transition后动画不生效的核心原因是：CSS过渡不支持display属性的状态切换。
你当前的显隐逻辑大概率是通过JS直接在display: none和display: block之间切换，这个属性的变化是瞬时跳变的，浏览器无法计算两个状态之间的中间插值，自然不会触发过渡渲染，无论怎么调整transition参数都不会生效。

优先选择适配固定侧边栏场景的max-height过渡方案，实现成本最低、兼容性最好，效果就是你需要的平滑滑入滑出。

1. 修改CSS样式 #

把.sub-menu默认状态下的display: none删掉，替换为以下过渡相关样式，原有其他样式（背景、宽度、字体样式等）保留即可：

.sub-menu {
  /* 核心过渡属性 */
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.5s ease-in-out;
  /* 如果子菜单自带上下内边距，把padding也加入过渡，避免收起状态漏出内容 */
  padding: 0 1rem;
  transition: max-height 0.5s ease-in-out, padding 0.5s ease-in-out;
}

/* 展开状态类，由JS控制切换 */
.sub-menu.active {
  /* 这个值设置为比你所有子菜单的实际最大高度稍大即可，不要设置过大，否则会出现动画前半段速度过快的问题 */
  max-height: 600px;
  padding: 0.5rem 1rem;
}

2. 修改JS交互逻辑 #

把原来切换display属性的逻辑删掉，改成直接切换.sub-menu的active类即可，示例逻辑：

// 给所有下拉箭头绑定点击事件
document.querySelectorAll('.nav-dropdown-trigger').forEach(trigger => {
  trigger.addEventListener('click', (e) => {
    // 找到当前导航项对应的子菜单
    const currentSubMenu = e.target.closest('.nav-item').querySelector('.sub-menu')
    // 切换展开类
    currentSubMenu.classList.toggle('active')
  })
})

如果你的子菜单是绝对定位的浮层，不需要占用文档流位置，可以用透明度+位移的组合实现更柔和的淡入滑出效果：

.sub-menu {
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none; /* 透明状态下屏蔽点击事件 */
  transition: all 0.5s ease;
}
.sub-menu.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

• 所有浏览器均不支持display属性的过渡效果，不要在这类显隐动画场景使用display切换
• 用max-height做过渡时不要把值设得过大，比如直接设max-height: 9999px，会导致浏览器计算的过渡时长和实际预期不符，收起动画会出现明显延迟
• 必须给隐藏状态的子菜单加overflow: hidden，否则max-height: 0时子菜单内容会直接溢出，无法实现隐藏效果

内容的提问来源于stack exchange，提问作者Abbas Kazmi