如何为Bootstrap 4导航栏切换菜单添加下滑过渡效果？

嘿，你说得没错！Bootstrap 4确实砍掉了导航栏折叠菜单的下滑过渡动画——我当时刚升级的时候也纳闷过这个变化。不过别担心，几行自定义CSS就能轻松把这个效果找回来，下面是具体的实现方法：

核心原理 #

Bootstrap 4的导航栏折叠是通过切换.collapse类的display属性来实现显示/隐藏的，但display属性没法做过渡动画。所以我们需要改用max-height属性来控制菜单的展开/收起，再配合CSS过渡来实现平滑的下滑效果。

自定义CSS代码 #

把这段代码放在Bootstrap官方CSS之后加载（确保能覆盖默认样式）：

/* 为导航栏折叠菜单添加过渡效果 */
.navbar-collapse {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

.navbar-collapse.show {
  /* 这里的值根据你的菜单实际高度调整，确保能容纳所有菜单项 */
  max-height: 500px;
  transition: max-height 0.3s ease-in;
}

代码说明 #

• 默认状态下，.navbar-collapse的max-height设为0，overflow:hidden让菜单完全收起，transition属性定义了收起时的动画速度和曲线。
• 当点击切换按钮后，Bootstrap会给菜单容器加上.show类，我们给这个类设置一个足够大的max-height（比如500px），让菜单完全展开，同时定义展开时的过渡动画。

注意事项 #

• 如果你的菜单包含很多菜单项，高度超过500px，记得把max-height的值调大（比如800px），避免内容被截断。
• 想要更快或更慢的动画速度？修改transition里的0.3s即可，比如0.5s会让动画更平缓。
• 一定要确保自定义CSS在Bootstrap CSS之后引入，否则默认样式会覆盖你的修改。

完整示例（HTML+CSS） #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap 4 Navbar Transition</title>
  <!-- 先引入Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <!-- 再引入自定义CSS -->
  <style>
    .navbar-collapse {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.3s ease-out;
    }

    .navbar-collapse.show {
      max-height: 500px;
      transition: max-height 0.3s ease-in;
    }
  </style>
</head>
<body>
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">My Brand</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarMenu" aria-controls="navbarMenu" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarMenu">
      <ul class="navbar-nav">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Services</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Contact</a>
        </li>
      </ul>
    </div>
  </nav>

  <!-- 引入Bootstrap JS和依赖 -->
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

这样设置后，点击导航栏的切换按钮，菜单就会像Bootstrap 3那样平滑地展开和收起啦！

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