Bootstrap移动端导航过渡样式不符预期问题求助

我的导航栏在桌面和移动端背景均为白色，期望将移动端下拉菜单背景设为灰色。我给小屏幕尺寸下的.show类添加了灰色背景的CSS，但点击导航按钮展开菜单时，过渡过程中会显示白色背景，且未应用自定义的内边距等样式，直到过渡结束才会切换为预期的灰色背景。想找可行的解决办法，猜测可以用CSS伪元素::before/::after实现。

现有代码 #

HTML代码 #

<!-- Nav -->
<nav class="navbar navbar-expand-lg fixed-top">
  <img class="navlogo img-fluid" src="img/master/logo1.jpg"> 
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
    aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation" style="
    margin-right: 12px;">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse justify-content-end" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
          <a class="nav-link" href="Default.html"><u>Home</u></a>
      </li>
      <li class="nav-item">
          <a class="nav-link" href="services.html"><u>Services</u></a>
      </li>
    </ul>
  </div>
</nav>

CSS代码 #

@media (min-width:345px) and (max-width: 379px) { 
  .navbar .show  {background-color: #f5f5f5; padding:10px; border-bottom:solid 1px black; border-radius: 5px;}    
}

样式对比 #

• 过渡过程样式：白色背景，无左内边距
• 过渡结束样式：灰色背景，已应用左内边距

解决方法 #

问题根源是Bootstrap的collapse组件过渡时，.show类是在过渡结束后才添加的，所以过渡过程中自定义样式不会生效。以下是两种可行方案：

方案1：给折叠容器设置基础样式+过渡 #

直接给.navbar-collapse添加过渡属性，同时定义折叠状态下的基础样式，让过渡过程中样式平滑变化：

@media (min-width:345px) and (max-width: 379px) { 
  /* 给折叠容器添加过渡动画，覆盖背景色和内边距变化 */
  .navbar-collapse {
    transition: background-color 0.3s ease, padding 0.3s ease;
    background-color: transparent; /* 默认继承导航栏白色 */
  }
  /* 展开后的最终样式 */
  .navbar .show {
    background-color: #f5f5f5; 
    padding:10px; 
    border-bottom:solid 1px black; 
    border-radius: 5px;
  }
}

方案2：用伪元素实现背景过渡（符合你的猜想） #

给.navbar-collapse设置相对定位，用伪元素作为独立背景层，通过.show控制伪元素的透明度实现过渡：

@media (min-width:345px) and (max-width: 379px) { 
  .navbar-collapse {
    position: relative;
    z-index: 1; /* 保证内容在伪元素上方 */
  }
  /* 伪元素作为背景容器 */
  .navbar-collapse::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #f5f5f5;
    border-bottom:solid 1px black; 
    border-radius: 5px;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
  }
  /* 展开时显示伪元素背景 */
  .navbar .show::before {
    opacity: 1;
  }
  /* 给导航菜单添加内边距，避免内容贴边 */
  .navbar .show .navbar-nav {
    padding:10px;
  }
}

补充说明 #

• Bootstrap的collapse过渡基于高度变化，需确保过渡属性包含你要修改的样式（如背景色、内边距）
• 方案1更简洁高效，推荐优先使用；方案2适合需要单独控制背景层的复杂场景

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