Bootstrap 默认的 .collapse 过渡动画会在展开过程中短暂使用原始样式（如白色背景），导致自定义的 .show 灰色背景延迟生效；解决关键是在过渡起始阶段就为 .collapse 元素预设目标样式，而非仅依赖 .show。
bootstrap 默认的 `.collapse` 过渡动画会在展开过程中短暂使用原始样式（如白色背景），导致自定义的 `.show` 灰色背景延迟生效；解决关键是在过渡起始阶段就为 `.collapse` 元素预设目标样式，而非仅依赖 `.show`。
在 Bootstrap 4/5 中，.navbar-collapse 的显示切换依赖于 .collapse 和 .show 两个状态类：.collapse 控制初始隐藏（height: 0、overflow: hidden），而 .show 在展开后添加（height: auto）。但过渡动画（由 transition: height .35s ease 驱动）期间，元素仍处于 .collapse 状态，尚未应用 .show 样式——这就造成了你观察到的“白底闪现”现象：过渡中背景保持默认白色，直到动画结束、.show 生效才跳变为灰色。
✅ 正确解法：为 .collapse 本身设置与 .show 一致的视觉样式（如背景色、内边距等），确保过渡全程视觉连贯。
例如，将你的 CSS 改写为：
/* 关键：同时作用于 collapse 和 show 状态 */
@media (max-width: 991.98px) { /* 推荐使用 Bootstrap 断点，而非固定像素 */
.navbar-collapse {
background-color: #f5f5f5;
padding: 10px;
border-bottom: solid 1px black;
border-radius: 5px;
}
/* 可选：微调展开后的额外样式 */
.navbar-collapse.show {
/* 如需区别可在此追加，但基础样式已由 .navbar-collapse 统一承载 */
}
}
⚠️ 注意事项：
- 避免内联 style 属性：答案中提到的直接写 style="background-color: #f5f5f5" 虽能临时生效，但违反 CSS 可维护性原则，且易被后续 JS 或框架逻辑覆盖；
- 优先使用响应式断点：Bootstrap 官方断点（如 max-width: 991.98px 对应 lg 下）比硬编码 345px–379px 更健壮，适配更多设备；
- 检查层级与继承：确保 .navbar-collapse 未被父级 .navbar 的 background-color: white 覆盖——必要时添加 !important 或提升选择器特异性（如 .navbar-expand-lg .navbar-collapse）；
- 过渡优化（进阶）：若需更平滑效果，可补充 transition: background-color .35s ease, padding .35s ease 到 .navbar-collapse，避免仅依赖 height 动画带来的视觉割裂。
总结：Bootstrap 的过渡动画本质是「状态切换」而非「样式渐变」，因此必须让 .collapse 元素在折叠/展开全周期都具备目标视觉属性。将样式从 .show 提前至 .collapse 是最简洁、符合框架设计逻辑的修复方式。
