为何transition: max-height不生效？下拉菜单无法平滑过渡

问题核心在于你用display: none和display: block控制菜单显示隐藏——这两个属性的切换是瞬时的，浏览器不会为元素计算max-height从0到200px的过渡中间状态，直接跳到最终展开状态，导致过渡动画完全失效。

修复思路 #

放弃用display控制显示隐藏，改用以下两种方案之一：

方案1：结合visibility、opacity和max-height

既能保留过渡动画，又能让元素隐藏时完全不响应交互：

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  position: absolute;
  background-color: #f9f9f9;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  overflow-y: hidden;
  max-height: 0;
  visibility: hidden; /* 隐藏元素但保留文档流位置 */
  opacity: 0; /* 透明化元素 */
  /* 隐藏时：先完成高度和透明度过渡，再延迟隐藏visibility */
  transition: max-height 0.3s ease-out, opacity 0.3s ease-out, visibility 0s 0.3s;
}

.dropdown:hover .dropdown-content {
  max-height: 200px;
  visibility: visible; /* 立即显示元素 */
  opacity: 1; /* 恢复不透明 */
  /* hover时：立即显示visibility，同步执行高度和透明度过渡 */
  transition: max-height 0.3s ease-out, opacity 0.3s ease-out, visibility 0s;
}

方案2：仅用max-height + overflow:hidden

更简洁的方案，元素始终在文档流中，通过高度和溢出隐藏内容：

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  position: absolute;
  background-color: #f9f9f9;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  overflow-y: hidden;
  max-height: 0;
  transition: max-height 0.3s ease-out;
  pointer-events: none; /* 隐藏时禁止交互，避免误点隐藏链接 */
}

.dropdown:hover .dropdown-content {
  max-height: 200px;
  pointer-events: auto; /* 展开后恢复交互 */
}

两种方案都能实现平滑的下拉动画，可根据实际需求选择。

内容的提问来源于stack exchange，提问作者Ben Alan