汉堡菜单切换时CSS淡入动画失效问题求助

问题核心原因 #

CSS过渡（transition）无法作用于display: none的元素——因为display: none会直接将元素从文档流中移除，浏览器不会为这类元素计算过渡动画，所以切换时opacity的变化会瞬间完成，看不到淡入效果。

解决方案一：用visibility替代display:none（推荐） #

这种方案保留元素在文档流中的位置（但因为菜单是绝对定位，不会影响页面布局），同时支持过渡动画：

修改.nav-menu的CSS：

.nav-menu {
  visibility: hidden; /* 初始隐藏，元素仍在文档流中 */
  opacity: 0;
  position: absolute;
  top: 100%;
  left: 0;
  height: 100vh;
  width: 100%;
  background: rgba(255, 255, 255, 0.9);
  text-align: center;
  padding: 3em 0;
  z-index: 1;
  /* visibility过渡设为0s，和opacity动画同步 */
  transition: visibility 0s, opacity 0.8s ease;
}

修改切换器的CSS：

.nav-toggle:checked ~ .nav-menu {
  visibility: visible;
  opacity: 1;
}

解决方案二：配合height+overflow实现无占位隐藏 #

如果希望菜单隐藏时完全不占空间（和display:none效果一致），可以用height、overflow配合opacity过渡：

修改.nav-menu的CSS：

.nav-menu {
  opacity: 0;
  height: 0;
  overflow: hidden; /* 裁掉超出高度的内容 */
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: rgba(255, 255, 255, 0.9);
  text-align: center;
  padding: 0; /* 初始padding设为0，避免高度计算偏差 */
  z-index: 1;
  transition: opacity 0.8s ease, height 0.8s ease, padding 0.8s ease;
}

修改切换器的CSS：

.nav-toggle:checked ~ .nav-menu {
  opacity: 1;
  height: 100vh;
  padding: 3em 0;
}

关键注意事项 #

• 所有需要过渡的属性，元素必须始终处于文档流中，display: none会直接破坏这一前提，所以永远不要用它配合过渡动画。
• 绝对定位的移动端菜单，用第一种方案足够满足需求，因为菜单是覆盖在页面内容上的，不会影响布局。

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