Checkbox过渡动画异常：低分辨率下菜单无法平滑下拉

我懂你这个痛点——用Checkbox做移动端汉堡菜单时，明明加了过渡动画却完全没效果，想要那种丝滑的下拉展开对吧？这问题十有八九是你用了display: none/block来切换菜单的显示状态，而这个属性根本不支持CSS过渡！下面给你一套完整的可运行方案，完美解决低分辨率屏幕下的平滑下拉需求：

完整代码示例 #

HTML（补全你未写完的部分） #

<nav class="header-nav">
  <input type="checkbox" id="header-nav-button">
  <label for="header-nav-button">☰</label>
  <ul class="header-nav-menu">
    <li><a class="header-nav-links" id="active">Home</a></li>
    <li><a class="header-nav-links about-us">About Us</a></li>
    <li><a class="header-nav-links">Services</a></li>
    <li><a class="header-nav-links">Contact</a></li>
  </ul>
</nav>

CSS（核心是用max-height实现过渡） #

/* 隐藏原生Checkbox，只用label触发交互 */
#header-nav-button {
  display: none;
}

/* 汉堡按钮默认在大屏隐藏 */
.header-nav label {
  display: none;
  cursor: pointer;
  font-size: 2rem;
  padding: 1rem;
  color: #333;
}

/* 大屏下菜单横向排列 */
.header-nav-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 2rem;
  align-items: center;
}

.header-nav-links {
  text-decoration: none;
  color: #333;
  padding: 0.5rem 1rem;
  transition: color 0.2s ease;
}

.header-nav-links:hover,
#active {
  color: #007bff;
}

/* 低分辨率屏幕下的适配（这里以768px为分界，可按需调整） */
@media (max-width: 768px) {
  /* 显示汉堡按钮 */
  .header-nav label {
    display: block;
  }

  /* 移动端菜单默认收起状态 */
  .header-nav-menu {
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    max-height: 0; /* 关键：用max-height控制收起，而非display:none */
    overflow: hidden;
    transition: max-height 0.3s ease-in-out; /* 过渡动画，时长可按需调整 */
  }

  /* Checkbox被选中时，展开菜单 */
  #header-nav-button:checked ~ .header-nav-menu {
    max-height: 500px; /* 设置一个足够大的值，要超过菜单实际高度 */
  }

  /* 移动端菜单链接样式优化 */
  .header-nav-links {
    display: block;
    width: 100%;
    padding: 1.2rem 1.5rem;
    border-bottom: 1px solid #f0f0f0;
  }
}

关键原理说明 #

1. 抛弃display:none/block：这个属性的切换是瞬间的，CSS无法对其添加过渡效果。我们改用max-height——默认设为0并隐藏溢出内容，选中Checkbox时把max-height设为一个远大于菜单实际高度的值，这样就能实现平滑的展开/收起动画。
2. 过渡属性选对：必须给菜单添加transition: max-height 0.3s ease-in-out，指定过渡的属性和时长，让动画更自然。
3. 定位避免布局混乱：移动端菜单用position: absolute脱离文档流，避免展开时把页面其他元素挤下去，提升整体体验。

内容的提问来源于stack exchange，提问作者Jarosław Mejer