如何为导航元素实现过渡效果？CSS添加transition不生效如何解决

问题原因 #

CSS的transition过渡属性不支持display属性，你当前给子菜单设置的默认状态是display: none，hover时切换为display: block，这种属性切换没有过渡效果，所以你加的transition: 2s不会生效。同时你把transition写在hover状态规则里，也会导致鼠标移出菜单时没有渐变消失的效果。

修复方案 #

替换你CSS中对应子菜单的两段规则即可：

/* 子菜单默认状态 */
nav ul li ul {
  position: relative;
  left: auto;
  right: 35%;
  /* 移除原有display:none，新增以下属性 */
  opacity: 0;
  visibility: hidden;
  height: 0;
  overflow: hidden;
  transition: all 2s ease; /* 这里的2s对应你需要的过渡时长，可自行调整 */
}

/*  hover触发子菜单显示 */
nav ul li:hover ul  {
  opacity: 1;
  visibility: visible;
  height: auto;
}

属性说明 #

• opacity：控制元素透明度，从0到1的变化就是你需要的渐显效果
• visibility：控制元素是否可交互，避免子菜单透明状态下还能被用户误触
• height + overflow:hidden：可选，添加后子菜单会同步有高度展开的过渡效果，不需要可以删除这两个属性，仅保留透明度的淡入淡出效果

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