解决Bootstrap折叠菜单展开与收起时的动画跳动问题，实现平滑过渡

Hey there! I’ve dealt with this exact annoying jump when toggling Bootstrap navbars before—let’s break down what’s causing it and fix it step by step.

What’s Causing the Jump? #

Looking at your code, there are a few key issues that lead to that unwanted movement:

• Invalid HTML structure: You nested a .navbar inside another .navbar, which conflicts with Bootstrap’s built-in styles. Also, your list items use .nav-link instead of the correct .nav-item class—this breaks Bootstrap’s intended layout hierarchy.
• Incomplete transition properties: Your .collapsing only transitions height and visibility, but missing padding/margin changes that can cause sudden height jumps when the menu expands/collapses.
• Invalid CSS value: margin: none on the toggler isn’t valid (should be margin: 0), which can cause button position shifts during the toggle.
• Incorrect CSS selector: Your .nav.navbar-nav.nav li a selector is redundant and targets the wrong elements, so your margin adjustments never actually applied to the links like you intended.

Step-by-Step Fix #

1. Fix the Navbar HTML Structure #

First, correct the nested classes and list item structure—this ensures Bootstrap applies its styles properly:

<header>
  <div>
    <nav class="navbar bg-light navbar-expand-xxlg">
      <!-- Fix: Remove nested .navbar, use correct collapse container class -->
      <div class="collapse navbar-collapse" id="navbar">
        <ul class="navbar-nav mx-auto">
          <!-- Fix: Use .nav-item for list items, .nav-link only for anchors -->
          <li class="nav-item"><a href="#" class="nav-link">Projects</a></li>
          <li class="nav-item"><a href="#" class="nav-link">About</a></li>
          <li class="nav-item"><a href="#" class="nav-link">Contact</a></li>
        </ul>
      </div>
      <div class="mx-auto">
        <button class="navbar-toggler collapsed" data-bs-toggle="collapse" data-bs-target="#navbar">
          <span class="menu-button">MENU</span>
        </button>
      </div>
    </nav>
  </div>
</header>

2. Update CSS for Smooth Transitions #

Adjust the transition properties, fix invalid values, and target the correct elements to eliminate jumps:

/* Fix: Add padding to transition to cover all height-related changes */
.collapsing {
  transition-property: height, visibility, padding;
  transition-duration: 1s;
  transition-timing-function: ease-in-out; /* Optional: Adds a smoother feel */
}

/* Fix: Simplify selector to target links correctly */
.navbar-nav .nav-link {
  font-size: 12px;
  color: black;
  /* Remove margin-top: auto unless you need specific vertical centering (can cause jumps if misapplied) */
}

/* Fix: Use valid margin value, clean up toggler styles */
.navbar-toggler,
.navbar-toggler:active,
.navbar-toggler:focus {
  outline: none;
  box-shadow: none;
  border: none;
  margin: 0; /* Replace invalid 'margin: none' */
}

/* Optional: Ensure collapse container has no unexpected margins/padding */
.navbar-collapse {
  margin: 0;
  padding: 0;
}

Why This Works #

• Correcting the HTML structure makes Bootstrap’s collapse plugin calculate heights accurately without conflicting styles.
• Adding padding to the transition ensures any internal spacing changes are animated smoothly instead of causing sudden jumps.
• Fixing the invalid margin: none value prevents the toggler button from shifting position when the menu opens/closes.
• The simplified CSS selector ensures your styles actually apply to the nav links, eliminating the need for ineffective margin tweaks.

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