画布外 - 左侧导航栏动画在关闭时非常跳跃/滞后

Off Canvas - Left Navbar animation very jumpy/laggy on close

本文关键字：非常 跳跃 滞后 动画 布外 导航      更新时间：2023-09-26

我正在尝试创建一个 Offcanvas 左侧导航栏，该导航栏可以通过单击按钮进入视图。

目前它打开正常，但是当它关闭页面的顶部导航非常跳跃并且没有动画的情况下立即关闭。

左侧栏也与页脚重叠，并且页脚不会像顶部导航栏那样移动

。

引导

添加了 -webkit-transition：所有 1s 都很容易; 到页脚和包装器类，因为一切都必须动画化。

我在 html、正文选择器上设置了隐藏的溢出，这是对跳跃页脚的修复。

现在唯一要做的就是在你的javascript中添加两行：$（".footer"）.css（'-webkit-transform'， 'translate（20%， 0）'）;

和

（".footer"）.css（'-webkit-transform'， 'translate（0， 0）'）;

我

不是专家，所以请随时纠正我，但我认为它按照您想要的方式工作。

$(document).ready(function() {
  var menu = "close";
  $(".menuToggle").click(function() {
    if (menu == "close") {
      $(".leftNavbar").css("-webkit-transform", "translate(0, 0)");
      $(".wrapper").css('-webkit-transform', 'translate(20%, 0)');
      $(".footer").css('-webkit-transform', 'translate(20%, 0)');
      menu = "open";
    } else {
      $(".leftNavbar").css("-webkit-transform", "translate(-100%, 0)");
      $(".wrapper").css('-webkit-transform', 'translate(0, 0)');
      $(".footer").css('-webkit-transform', 'translate(0, 0)');
      menu = "close";
    }
  });
});
/* CSS used here will be applied after bootstrap.css */
.leftNavbar {
  position: fixed;
  width: 20%;
  left: 0;
  overflow: hidden;
  background-color: green;
  -webkit-transform: translate(-100%, 0);
  -webkit-transition: all 1s ease;
}
.menuToggle .navbar-toggle .icon-bar {
  background-color: black;
}
.menuToggle .navbar-toggle {
  display: block;
  float: left;
  border: 1px solid gray;
  margin-left: 5px;
  margin-top: -10px;
}
html,
body {
  height: 100%;
  overflow: hidden;
}
.wrapper {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto -40px;
  -webkit-transition: all 1s ease;
}
footer,
.push {
  min-height: 40px;
  height: auto;
}
.footer {
  color: white;
  -webkit-transition: all 1s ease;
}
<div class="leftNavbar">
  <h2>Sidebar menu</h2>
  <nav>
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
    <a href="#">Prices</a>
  </nav>
</div>
<div class="wrapper">
  <div class="navbar navbar-inverse navbar-static-top" role="navigation">
    <div class="container">
      <div class="navbar-header">
        <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand">
          <img id="logo" src="Logos/LetterHillustrator.png">
        </a>
      </div>
      <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
          <li class="active"><a href="index.html">Home</a>
          </li>
          <li><a href="Services.html">Services</a>
          </li>
          <li><a href="Prices.html">Our Prices</a>
          </li>
          <li><a href="AboutUs.html">About Us</a>
          </li>
          <li><a href="Contact.php">Contact Us</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <!--------SIDE NAVBAR-------->
  <!--<div class="leftNavbar">
                <ul class="nav nav-pills nav-stacked">
                  <li class="active"><a href="#"><span class="glyphicon glyphicon-chevron-right"></span> Home</a></li>
                  <li><a href="#"><span class="glyphicon glyphicon-chevron-right"></span> Option 1</a></li>
                  <li><a href="#" class="active2"><span class="glyphicon glyphicon-chevron-right"></span> Option 2 (active)</a></li>
                  <li><a href="#"><span class="glyphicon glyphicon-chevron-right"></span> Option 3</a></li>
                  <li><a href="#"><span class="glyphicon glyphicon-chevron-right"></span> Option 4</a></li>
                  <li><a href="#"><span class="glyphicon glyphicon-chevron-right"></span> Option 5</a></li>
                </ul>
            </div>-->
  <!-----SIDEBAR------->
  <div class="menuToggle">
    <button class="navbar-toggle">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
  </div>
  <div class="push"></div>
</div>
<footer class="footer navbar-inverse">
  <div class="container">
    <h6 style="width:50%; text-align:center;">34 The Broadway, Greenford UB6 9PT, tel: 020 8575 0880, Email: info@GoodHome.co.uk</h6>
  </div>
</footer>

相关文章：