bootstrap 导航栏折叠动画滞后且行为异常

Question

var nav = document.querySelector('nav');

      window.addEventListener('scroll', function () {
        if (window.pageYOffset > 40) {
          nav.classList.add('bg-white');
        } else {
          nav.classList.remove('bg-white');
        }
      });
      

      
      $(document).ready(function(){
        $('#nav-icons').click(function(){
          $(this).toggleClass('open');
        });
      });


      $(document).ready(function() {
        $('.client').slick({
            autoplay: false,
            autoplaySpeed: 1000,
            speed: 600,
            draggable: true,
            infinite: true,
            slidesToShow: 4,
            slidesToScroll: 4,
            arrows: true,
            responsive: [
                {
                  breakpoint: 991,
                  settings: {
                    slidesToShow: 3,
                    slidesToScroll: 3,
                  }
                },
                {
                  breakpoint: 767,
                  settings: {
                    slidesToShow: 3,
                    slidesToScroll: 3,
                  }
                },
                {
                    breakpoint: 575,
                    settings: {
                      slidesToShow: 2,
                      slidesToScroll: 2,
                    }
                }
            ]
        });
    }); 


    $(window).on("load", function() {
      $('.spinner').fadeOut(300);
      $("body").addClass("pageloaded");
  });

:root {
  --primary-color:#0071ce;
  --secondary-color:#ffe800;
}
/* Navbar */
button {
  color: transparent;
}
.navbar {
  visibility: hidden;
}
.pageloaded .navbar {
  visibility: visible;
}
.navbar-custom .nav-link{
  font-family: 'ProximaNova-Semibold', Courier, monospace;
  text-transform: uppercase;
  color: var(--primary-color);
  display: block;
  font-size: 1.0rem;
}
.navbar-custom .nav-link a{
  padding: 50rem;
}
.navbar-custom{
  padding: 25px;
  padding-left: 25px;
  background-color: rgb(255, 255, 255);
}
.navbar-custom a{
  padding: 5px 10px;
  display: block;
}
.navbar-custom a:hover{
  text-decoration: none;
  color: var(--primary-color);
}
.navbar-custom a.active{
  color: var(--secondary-color);
}
#nav-icons {
  width: 35px;
  height: 45px;
  position: relative;
  margin: 6px auto;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: 0.4s ease-in-out;
  -moz-transition: 0.4s ease-in-out;
  -o-transition: 0.4s ease-in-out;
  transition: 0.4s ease-in-out;
  cursor: pointer;
}
#nav-icons span {
  display: block;
  position: absolute;
  height: 5px;
  width: 100%;
  background: var(--primary-color);
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}
#nav-icons span:nth-child(1) {
  top: 0px;
  -webkit-transform-origin: center;
  -moz-transform-origin: center;
  -o-transform-origin: center;
  transform-origin: center;
}
#nav-icons span:nth-child(2) {
  top: 11px;
  -webkit-transform-origin: center;
  -moz-transform-origin: center;
  -o-transform-origin: center;
  transform-origin: center;
}
#nav-icons span:nth-child(3) {
  top: 21px;
  -webkit-transform-origin: center;
  -moz-transform-origin: center;
  -o-transform-origin: center;
  transform-origin: center;
}
#nav-icons.open span:nth-child(1) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  top: 10px;
  left: 2px;
}
#nav-icons.open span:nth-child(2) {
  width: 0%;
  opacity: 0;
}
#nav-icons.open span:nth-child(3) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 10px;
  left: 4px;
}


/* Media query */
@media only screen and (max-width: 767px) {
  .navbar-custom{
      padding: 0px;
      padding-left: 25px;
      padding-top: 5px;
      padding-bottom: 5px;
 }
  .navbar-collapse{
      display: block;
      position: absolute;
      width: 150vw;
      height: 150vh;
      left: 0;
      top: 0;
      background: var(--secondary-color);
      z-index: 2;
 }
  #nav-icons{
      z-index: 3;
 }
  .navbar-collapse .navbar-nav{
      padding-top: 120px;
      padding-left: 30px;
 }

}

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link rel="shortcut icon" href="./images/social-and-icons/favicon.ico" type="image/x-icon">
      <title>Welcome To my website</title>
      <!-- css -->
      <link rel="stylesheet" href="./css/style.css">
      <!-- Bootstrap 5 -->
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
   </head>
   <body>
      <header>
         <nav class="navbar navbar-expand-md navbar-custom fixed-top">
            <div class="container-fluid">
               <a  class="navbar-brand" href="index.html"><img src="./images/logo.png" width="78" height="100" alt="logo"></a>
               <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                  <div id="nav-icons">
                     <span></span><span></span><span></span>
                  </div>
               </button>
               <div class="collapse navbar-collapse" id="navbarSupportedContent">
                  <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
                     <li   class="nav-item">
                        <a class="nav-link" aria-current="page" href="#">About Us</a>
                     </li>
                     <li  class="nav-item">
                        <a class="nav-link" href="#">About Us</a>
                     </li>
                     <li class="nav-item">
                        <a class="nav-link" href="#">About Us</a>
                     </li>
                     <li  class="nav-item">
                        <a class="nav-link" href="#">About Us</a>
                     </li>
                  </ul>
               </div>
            </div>
         </nav>
      </header>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
      <script src="./js/script.js"></script>

我需要有关 bootstrap 导航栏折叠的帮助。当我点击汉堡菜单时，在它完全展开之前会有短暂的延迟。 Also, if you click very quickly, such as multiple times on the burger icon, the x icon animation is delayed, and the x becomes the closed icon rather than the burger icons, 这很烦人，因为我喜欢在导航折叠时有一点延迟。请查看下面我的 link 的实时版本：

Answer 1

我遇到了同样的问题，对我有用的是将 ul 的高度设置为 100vh，而不是整个 navbar-collapse 的高度。见以下代码：

     .navbar-collapse ul {height: 100vh;}

我希望这会有所帮助。

var nav = document.querySelector('nav');

      window.addEventListener('scroll', function () {
        if (window.pageYOffset > 40) {
          nav.classList.add('bg-white');
        } else {
          nav.classList.remove('bg-white');
        }
      });
      

      
      $(document).ready(function(){
        $('#nav-icons').click(function(){
          $(this).toggleClass('open');
        });
      });


      $(document).ready(function() {
        $('.client').slick({
            autoplay: false,
            autoplaySpeed: 1000,
            speed: 600,
            draggable: true,
            infinite: true,
            slidesToShow: 4,
            slidesToScroll: 4,
            arrows: true,
            responsive: [
                {
                  breakpoint: 991,
                  settings: {
                    slidesToShow: 3,
                    slidesToScroll: 3,
                  }
                },
                {
                  breakpoint: 767,
                  settings: {
                    slidesToShow: 3,
                    slidesToScroll: 3,
                  }
                },
                {
                    breakpoint: 575,
                    settings: {
                      slidesToShow: 2,
                      slidesToScroll: 2,
                    }
                }
            ]
        });
    }); 


    $(window).on("load", function() {
      $('.spinner').fadeOut(300);
      $("body").addClass("pageloaded");
  });

:root {
  --primary-color:#0071ce;
  --secondary-color:#ffe800;
}
/* Navbar */
button {
  color: transparent;
}
.navbar {
  visibility: hidden;
}
.pageloaded .navbar {
  visibility: visible;
}
.navbar-custom .nav-link{
  font-family: 'ProximaNova-Semibold', Courier, monospace;
  text-transform: uppercase;
  color: var(--primary-color);
  display: block;
  font-size: 1.0rem;
}
.navbar-custom .nav-link a{
  padding: 50rem;
}
.navbar-custom{
  padding: 25px;
  padding-left: 25px;
  background-color: rgb(255, 255, 255);
}
.navbar-custom a{
  padding: 5px 10px;
  display: block;
}
.navbar-custom a:hover{
  text-decoration: none;
  color: var(--primary-color);
}
.navbar-custom a.active{
  color: var(--secondary-color);
}
#nav-icons {
  width: 35px;
  height: 45px;
  position: relative;
  margin: 6px auto;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: 0.4s ease-in-out;
  -moz-transition: 0.4s ease-in-out;
  -o-transition: 0.4s ease-in-out;
  transition: 0.4s ease-in-out;
  cursor: pointer;
}
#nav-icons span {
  display: block;
  position: absolute;
  height: 5px;
  width: 100%;
  background: var(--primary-color);
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}
#nav-icons span:nth-child(1) {
  top: 0px;
  -webkit-transform-origin: center;
  -moz-transform-origin: center;
  -o-transform-origin: center;
  transform-origin: center;
}
#nav-icons span:nth-child(2) {
  top: 11px;
  -webkit-transform-origin: center;
  -moz-transform-origin: center;
  -o-transform-origin: center;
  transform-origin: center;
}
#nav-icons span:nth-child(3) {
  top: 21px;
  -webkit-transform-origin: center;
  -moz-transform-origin: center;
  -o-transform-origin: center;
  transform-origin: center;
}
#nav-icons.open span:nth-child(1) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  top: 10px;
  left: 2px;
}
#nav-icons.open span:nth-child(2) {
  width: 0%;
  opacity: 0;
}
#nav-icons.open span:nth-child(3) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 10px;
  left: 4px;
}


/* Media query */
@media only screen and (max-width: 767px) {
  .navbar-custom{
      padding: 0px;
      padding-left: 25px;
      padding-top: 5px;
      padding-bottom: 5px;
 }
  .navbar-collapse{
      display: block;
      position: absolute;
      width: 150vw;
      height: 150vh;
      left: 0;
      top: 0;
      background: var(--secondary-color);
      z-index: 2;
 }
  #nav-icons{
      z-index: 3;
 }
  .navbar-collapse .navbar-nav{
      padding-top: 120px;
      padding-left: 30px;
 }

}

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link rel="shortcut icon" href="./images/social-and-icons/favicon.ico" type="image/x-icon">
      <title>Welcome To my website</title>
      <!-- css -->
      <link rel="stylesheet" href="./css/style.css">
      <!-- Bootstrap 5 -->
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
   </head>
   <body>
      <header>
         <nav class="navbar navbar-expand-md navbar-custom fixed-top">
            <div class="container-fluid">
               <a  class="navbar-brand" href="index.html"><img src="./images/logo.png" width="78" height="100" alt="logo"></a>
               <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                  <div id="nav-icons">
                     <span></span><span></span><span></span>
                  </div>
               </button>
               <div class="collapse navbar-collapse" id="navbarSupportedContent">
                  <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
                     <li   class="nav-item">
                        <a class="nav-link" aria-current="page" href="#">About Us</a>
                     </li>
                     <li  class="nav-item">
                        <a class="nav-link" href="#">About Us</a>
                     </li>
                     <li class="nav-item">
                        <a class="nav-link" href="#">About Us</a>
                     </li>
                     <li  class="nav-item">
                        <a class="nav-link" href="#">About Us</a>
                     </li>
                  </ul>
               </div>
            </div>
         </nav>
      </header>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
      <script src="./js/script.js"></script>

bootstrap 导航栏折叠动画滞后且行为异常

The bootstrap navbar collapse animation is lagging and behaving strangely

bootstrap-5

lag

hamburger-menu