实现汉堡菜单时，为<ul>标签添加CSS3淡入过渡效果失败，求解决

嘿，这问题我之前也踩过坑！CSS Transition 是没法作用在 display: none 和 display: block 之间的，因为 display 属于离散型属性——它的变化是“瞬间切换”，没有中间过渡状态，浏览器根本没法计算过渡动画。你写的 transition: .7s 其实被浏览器直接忽略了。

解决方案：用可过渡属性替代 display #

推荐用两种方案实现淡入效果，都能完美触发 Transition：

方案1：opacity + visibility（布局更稳定，推荐） #

修改你的 CSS 代码如下：

nav #toggle { display: none; }
/* 初始隐藏状态：透明+不可见 */
nav #navelements { 
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.7s ease, visibility 0.7s ease;
}
nav #navelements ul li { line-height: 2rem; text-align: left; width: 100%; }
/* 选中后显示：不透明+可见 */
nav #toggle:checked + #navelements { 
  opacity: 1;
  visibility: visible;
}

• visibility: hidden 会让元素不可见，但依然占据页面空间，避免菜单显示/隐藏时出现布局跳动；
• opacity 负责淡入淡出的过渡动画，配合 visibility 还能防止元素隐藏后被误点击。

方案2：max-height + overflow（完全隐藏不占空间） #

如果希望菜单隐藏时完全不占用页面空间，可以用这个方案：

nav #toggle { display: none; }
nav #navelements { 
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.7s ease, opacity 0.7s ease;
}
nav #navelements ul li { line-height: 2rem; text-align: left; width: 100%; }
nav #toggle:checked + #navelements { 
  max-height: 200px; /* 设置一个足够容纳菜单内容的高度即可 */
  opacity: 1;
}

• max-height: 0 配合 overflow: hidden 会把元素完全收缩，不占任何空间；
• 选中后设置一个足够大的 max-height（比如菜单内容总高度是150px，设200px就足够），触发高度和透明度的过渡动画。

为什么原代码不生效？ #

你之前的代码始终在操作 display 属性，而 Transition 只支持有中间状态的属性（比如 opacity、height、transform 等），display 这种“非黑即白”的属性没有过渡的中间状态，所以浏览器直接跳过了你的过渡设置。

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