关闭画布 - 左导航栏动画非常跳跃/ laggy关闭

Question

我正在尝试创建一个Offcanvas左导航栏，可以通过按钮单击将其导入到视图中。

目前它打开的很好，但是当它关​​闭时，页面的顶部导航非常不稳定，并且在没有动画的情况下立即关闭。

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

Bootply

Answer 1

新增-webkit-过渡：全1轻松自如;到页脚和包装类，因为一切都必须动画。

我设置了隐藏在HTML，身体选择器上的溢出，这是跳跃页脚的修复。

现在唯一要做的就是在javascript中添加两行： $（“。footer”）。css（' - webkit-transform'，'translate（20％，0）'）;

和

（ “.footer”）的CSS（ ' - WebKit的变换'， '翻译（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>