如何使用CSS实现导航栏下拉菜单的ease-in缓入过渡效果

问题原因 #

你代码里的过渡动画失效核心是两个问题：

• display 属性不支持CSS过渡，none 切换到 block 是瞬间完成的，不会触发你设置的ease-in效果
• 默认状态下没有设置overflow: hidden，且固定了padding-top值，即使高度为0也会出现多余背景块，内容也可能溢出

修复方案 #

不需要修改HTML结构，只需要调整.navDropList和对应hover状态的CSS规则即可：

1. 移除display: none/display: block的显隐控制，改用opacity+visibility组合控制显隐，这两个属性都支持过渡
2. 默认状态下添加overflow: hidden，同时将内边距也加入过渡逻辑，避免未展开时出现多余空隙
3. 保留高度过渡的配置，和透明度变化配合实现缓入效果

修改后的完整CSS代码（仅调整了下拉菜单相关的规则，其余原有规则保持不变即可） #

/*style for the list items in the drop down*/
.navDropList .navDropItem {
  padding-top: 8px;
  padding-bottom: 8px;
  margin-top: 5px;
  width: 100%;
  list-style: none;
}


/*styling the div that the list resides in*/
.navDropList .dropTag {
  font-size: 20px;
  color: #d3d3d3;
  text-decoration: none;
  font-family: 'Source Sans Pro', sans-serif;
}


/*修改后的默认下拉菜单样式*/
.navDropList {
  width: 100%;
  background-color: #414141;
  /* 默认内边距设为0，hover时再展开，避免出现多余色块 */
  padding: 0;
  margin-bottom: 5%;
  padding-left: 0px;
  border-bottom-left-radius: 5%;
  border-bottom-right-radius: 5%;
  text-align: center;
  position: absolute;
  /* 移除display:none，改用透明度和可见性控制显隐 */
  opacity: 0;
  visibility: hidden;
  transition: all .3s ease-in;
  height: 0;
  /* 新增：高度不足时隐藏溢出的内容 */
  overflow: hidden;
}


/*修改后的hover触发规则*/
.navListItem:hover .navDropList {
  /* 移除display:block */
  opacity: 1;
  visibility: visible;
  height: 250px;
  /* 展开时恢复内边距 */
  padding-top: 10px;
}

修改后鼠标悬停时，下拉菜单会同时出现高度从0到250px、透明度从0到1的缓入过渡，符合你的需求。

内容的提问来源于stack exchange，提问作者Nick Johnson