关闭纯HTML/CSS汉堡菜单时菜单链接错位异常

关闭汉堡菜单时链接先跳左上角再消失，是因为display: flex居中布局仅设置在复选框选中的菜单展开状态下：

• 取消勾选关闭菜单的瞬间，display: flex规则立即失效，菜单ul退回默认块级布局，内部链接直接回到文档流默认的左上角位置
• 此时transform缩放的400ms过渡动画还在执行，就会出现链接先跳位、等动画结束才消失的异常
• 额外问题：链接的透明度过渡没有做开闭状态的时序匹配，关闭时链接不会提前隐藏，会放大跳位的视觉问题；ul默认自带的内外边距没清除，还可能出现横向滚动条。

直接替换对应媒体查询里的相关CSS规则即可，不需要改HTML结构，也不需要加JS：

1. 修改默认状态的ul#mobile-hamburger样式，把flex居中布局移到默认规则里，同时清除默认边距、补全定位属性：

ul#mobile-hamburger {
  position: absolute;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  background: white;
  transform: scale(1,0);
  transform-origin: top;
  transition: transform 400ms ease-in-out;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
}

2. 简化选中状态的菜单规则，删掉重复的flex布局属性：

#menu-toggle:checked ~ ul#mobile-hamburger {
  transform: scale(1,1);
}

3. 调整链接透明度的过渡时序，实现「展开菜单后延迟显示链接、关闭菜单时先隐藏链接再收起」的流畅效果：

ul#mobile-hamburger li a {
  text-align: center;
  opacity: 0;
  transition: opacity 150ms ease-in-out;
}

#menu-toggle:checked ~ ul#mobile-hamburger a {
  opacity: 1;
  transition: opacity 250ms ease-in-out 250ms;
}

修改后菜单无论展开还是收起状态，始终保持flex居中布局，关闭时不会出现布局重置导致的链接跳位问题，动画时序匹配自然，没有突兀的跳变。

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