如何为hover触发的下拉菜单添加中速平滑下滑展开效果

实现方法 #

你现在的下拉菜单闪现的核心原因是display属性不支持CSS过渡动画，从none切换到block是瞬间生效的，只要替换显示控制逻辑为支持过渡的属性即可，修改成本极低：

需修改的CSS部分 #

1. 调整.dropdown-content的默认样式，删除原有的display: none，新增过渡相关属性：

.dropdown-content {
  border-radius: 12px;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  z-index: 1;
  /* 新增以下内容 */
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-4px);
  transition: all 0.3s ease; /* 0.3s为中等速度，可自行调整时长 */
}

2. 调整hover触发的.dropdown-content样式，删除原有的display: block，替换为展开状态的属性：

.dropdown:hover .dropdown-content {
  max-height: 300px; /* 取值只要大于你菜单实际总高度即可，当前内容300px足够 */
  opacity: 1;
  transform: translateY(0);
}

效果说明 #

• 展开时会同时触发透明度从无到有、位置从略微上移到正常位置、高度从0到展开的组合动画，就是你要的平滑下滑效果
• 收起时也会自动触发反向过渡，不会突然消失
• 原有功能完全不受影响，不需要修改HTML结构
• 如果后续菜单内容增多，只要把max-height调大到比实际内容高度大即可正常使用

内容的提问来源于stack exchange，提问作者F Tyrrell