页面跳转后导航栏项突然从屏幕右侧“滑入”到正确位置，根本原因是初始 HTML 中预置了 shrink 类，且 CSS 对未收缩状态的元素（如 header、nav ul li、#logo）也设置了全局 transition，导致浏览器在首次渲染时对所有带过渡属性的样式变化执行动画——而非仅在滚动触发状态切换时才启用。
页面跳转后导航栏项突然从屏幕右侧“滑入”到正确位置，根本原因是初始 html 中预置了 `shrink` 类，且 css 对未收缩状态的元素（如 `header`、`nav ul li`、`#logo`）也设置了全局 `transition`，导致浏览器在首次渲染时对所有带过渡属性的样式变化执行动画——而非仅在滚动触发状态切换时才启用。
这是一个典型的「初始渲染过渡干扰」问题，常见于带滚动响应式导航栏（shrink-on-scroll navbar）的多页网站中。虽然功能逻辑（滚动 >100px 缩小，返回顶部恢复）本身正确，但CSS 过渡（transition）不应作用于页面首次加载的静态布局阶段，否则会触发非预期的入场动画。
✅ 正确实现原则：过渡仅用于「状态切换」，而非「初始呈现」
关键在于分离「默认样式」与「过渡样式」：
- 默认状态（未滚动）：所有尺寸、定位、行高均使用静态值，不声明 transition
- 收缩状态（.shrink 类激活）：仅在此类下定义 transition，确保动画只在 JS 添加/移除该类时触发
? 修改步骤详解
1. 移除 HTML 中的初始 shrink 类
将所有页面（index.html、moi.php 等）中
<!-- ❌ 错误：初始即带 shrink，触发首次渲染动画 --> <header id="main-header" class="shrink"><!-- ✅ 正确：初始无 shrink，由 JS 动态控制 --><header id="main-header"></header></header>
2. 精简 CSS：仅在 .shrink 下启用过渡
注释或删除所有非 .shrink 上下文中的 transition 声明，保留仅在收缩状态生效的过渡规则：
/* ✅ 仅 shrink 状态启用过渡（安全） */
header.shrink {
height: 4.5em;
transition: height 0.8s ease-in-out; /* 明确指定属性，避免 all 带来意外 */
}
header.shrink #logo {
width: 70px;
height: 70px;
transition: width 0.8s ease-in-out, height 0.8s ease-in-out;
}
header.shrink nav ul li {
line-height: 4em;
transition: line-height 0.8s ease-in-out;
}
/* ❌ 删除以下全局过渡（它们导致首次渲染动画） */
/*
header { transition: all .8s ease-in-out; }
header #logo { transition: width 0.8s ...; }
nav ul li { transition: all .8s ...; }
*/
? 提示：使用 transition: property duration timing-function 替代 transition: all ...，可精准控制动画范围，提升性能与可预测性。
3. JavaScript 保持不变（已合理）
您的滚动监听逻辑完全正确，无需修改：
const header = document.getElementById("main-header");
window.addEventListener("scroll", () => {
if (window.scrollY > 100) {
header.classList.add("shrink");
} else {
header.classList.remove("shrink");
}
});
? 常见误区与额外建议
- 不要用 transition 模拟“加载动画”：若需首屏视觉引导，应使用 @keyframes + animation 配合 animation-delay，而非依赖 transition。
-
检查浮动（float）布局兼容性：当前 nav ul { float: right } 在现代布局中易引发清除问题。推荐改用 Flexbox 提升健壮性：
nav { display: flex; justify-content: space-between; align-items: center; } nav ul { display: flex; margin: 0; padding: 0; } nav ul li { list-style: none; margin-left: 1em; line-height: 6em; /* 默认高度 */ } -
添加 will-change 提升动画性能（可选）：
在 header.shrink 中加入 will-change: height;，提示浏览器提前优化渲染层（适用于高频滚动场景）。
✅ 最终效果验证清单
| 检查项 | 是否满足 |
|---|---|
| 所有页面 |
✅ |
| transition 仅出现在 .shrink 规则内 | ✅ |
| 页面首次加载时菜单位置稳定，无位移/缩放动画 | ✅ |
| 滚动超过 100px 后平滑缩小，返回顶部平滑复原 | ✅ |
通过以上调整，您将获得一个专业、无干扰的响应式导航栏——它只在用户真实交互（滚动）时才展现动画，彻底告别跳转后“菜单乱跑”的困扰。
