CSS transition效果不一致：汉堡菜单顶部滑入效果部分页面失效

问题核心原因 #

这个问题是浏览器初始渲染时未正确记录菜单元素的初始transform状态导致的，属于典型的浏览器回流/重绘触发时机问题：

• 菜单关闭动画正常，说明transition属性本身配置没有问题，问题只出现在从页面加载后的初始状态切换到展开状态的过程
• Pesticide插件开启后所有页面动画正常，是因为该插件会为页面所有元素添加调试边框，强制全局触发重绘，浏览器因此正确记录了菜单的初始transform值，过渡动画就可以正常执行
• 仅单个页面动画正常，大概率是该页面的其他元素（比如动态加载的内容、更大的DOM结构）在加载时自动触发了全局重绘，刚好帮菜单完成了初始状态记录

可落地的解决方案 #

1. 最简便的修复方案：在页面加载完成后强制触发菜单元素的回流，让浏览器正确记录初始状态，添加如下JS代码即可：

document.addEventListener('DOMContentLoaded', function() {
  // 读取offsetHeight会强制浏览器触发元素回流，不需要修改属性值
  document.getElementById('menu').offsetHeight;
});

2. 更稳定的状态控制方案：替换伪类控制逻辑为显式的类名切换，避免浏览器对伪类状态的判断误差：

• 首先修改Sass配置：

ul#menu {
  position: relative;
  display: flex;
  -webkit-font-smoothing: antialiased;
  transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
  /* 移除默认的transform配置 */
}
/* 新增闭合状态类 */
ul#menu.menu-closed {
  transform: translate(0, -100rem);
}
/* 移除原有的input:checked ~ ul选择器配置，改为展开状态类 */
ul#menu.menu-open {
  transform: none;
}

• 修改toggleMenu函数，点击时切换菜单的类名即可，比伪类控制状态更可控，也能避免这类初始渲染问题。

3. 可选排查项：可以检查其余三个页面是否有公共的CSS规则，比如针对header或者ul元素的display: none、visibility: hidden等配置（哪怕是加载过程中短暂生效的），如果有也会导致元素初始状态未被浏览器记录。

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