菜单关闭时无过渡动画问题求助（附示例链接与测试代码）

问题根源 #

菜单关闭时，父容器.navigation__nav直接设置height: 0并配合overflow: hidden，导致子元素.navigation__list的透明度过渡被立即截断，无法正常触发。同时你之前添加的代码错误地将关闭状态下的列表透明度设为1，反而阻碍了过渡效果。

修复方案 #

1. 调整父容器的过渡逻辑：给.navigation__nav添加visibility属性，配合过渡延迟，确保关闭时先完成高度过渡再隐藏容器，避免截断子元素的动画。
2. 修正列表的透明度过渡触发条件：移除你添加的错误代码，确保关闭时列表透明度能从1平滑过渡到0。

修改后的关键CSS代码如下：

.navigation__nav {
  height: 0;
  overflow: hidden;
  visibility: hidden;
  /* 关闭时：先过渡height，延迟0.8s后隐藏visibility */
  transition: height 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55), visibility 0s 0.8s;
}

.navigation__checkbox:checked ~ .navigation__nav {
  height: 100vh;
  visibility: visible;
  /* 展开时：立即显示visibility，同时过渡height */
  transition: height 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55), visibility 0s;
}

.navigation__list {
  opacity: 0;
  transition: opacity 0.8s ease;
}

.navigation__checkbox:checked ~ .navigation__nav .navigation__list {
  opacity: 1;
}

原理说明 #

• 展开菜单时：visibility立即变为visible，同时height从0过渡到100vh，子列表的透明度也从0过渡到1，两个动画同步完成。
• 关闭菜单时：height先从100vh过渡到0，同时子列表透明度从1过渡到0，等高度动画完成后（0.8s延迟），visibility才变为hidden，确保整个关闭过程的过渡效果完整显示。

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