侧面菜单宽度动画？

Question

我想设置一个侧边的导航条，当点击汉堡包图标时显示隐藏。已经实现了，但问题是ul里面的li's也在做动画，我看到它们在过渡时收缩，然后随着导航条的增长而增长。希望你能明白我的意思。我如何设置才能看到只有父元素(sideNav)的宽度 "增长"？目前来看，在li's上看到这种过渡有点丑陋。

我正在为一个有动态内容的CMS主题工作（所以大多数元素已经继承了样式，所以我想弄清楚是什么原因导致了li's上的动画），标记是，或多或少，像这样。

function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
}

.sideNav {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9;
  width: 0;
  height: 100%;
  overflow-x: hidden;
  transition: all 0.5s ease;
}

<span id="openMenu" onclick="openNav()">Menu</span>

<nav class="sideNav">
  <div class="navBar_primary">
    <ul>
      <li class="navBar_item">
        <a href="#">Item</a>
        <ul class="navBar_secondary">
          <li class="navBar_item">
            <a href="#">Submenu Item</a>
          </li>
        </ul>
      </li>
      <li class="navBar_item">
        <a href="#">Item 2</a>
      </li>
    </ul>
  </div>
</nav>

先谢谢大家了。

Answer 1

通常情况下，当我想实现这个功能时，我不是将宽度改为0px，而是将左侧位置改为负宽度。

.sideNav {
  position: fixed;
  top: 0;
  left: -250px;
  z-index: 9;
  width: 250px;
  height: 100%;
  overflow-x: hidden;
  transition: all 0.5s ease;
}

function openNav() {
  document.getElementById("mySidenav").style.left= "0px";
}

根据你的使用情况，这可能不是你要找的东西，但可能是一个不错的选择。

Answer 2

 <nav id="sidenav">
    <ul>
        <li><a href="" class="home">HOME</a></li>
        <li><a href="">ABOUT US</a></li>
        <li><a href="">FEATURES</a></li>
        <li><a href="">COURSES</a></li>
        <li><a href="">OFFER</a></li>
        <li><a href="">CONTACT</a></li>
    </ul>
</nav>
<i class="fas fa-hamburger" id="menuBtn"></i>

 <script>
        var menuBtn = document.getElementById("menuBtn");
        var sidenav = document.getElementById("sidenav");

        sidenav.style.right = "-300px";
        menuBtn.onclick = function(){
            if(sidenav.style.right == "-300px"){
                sidenav.style.right= "0";
            }
            else{
                sidenav.style.right = "-300px";
            }
        }
   
    </script>

#sidenav{
    width:300px;
    height: 100vh;
    position: fixed;
    right: -300px;
    top: 0;
    background:#353a85e8;
    z-index:2;
    transition: .5s;
    padding-top: 60px;
}

nav  ul li{
    list-style: none;
    margin: 50px 20px;
}
nav ul li a{
    text-decoration: none;
    color: white;
}
#menuBtn{
    font-size: 40px;
    color:#5d66d3;
    position: fixed;
    right: 65px;
    top: 35px;
    z-index: 2;
    cursor: pointer;
}

 <nav id="sidenav">
        <ul>
            <li><a href="" class="home">HOME</a></li>
            <li><a href="">ABOUT US</a></li>
            <li><a href="">FEATURES</a></li>
            <li><a href="">COURSES</a></li>
            <li><a href="">OFFER</a></li>
            <li><a href="">CONTACT</a></li>
        </ul>
    </nav>
    <i class="fas fa-hamburger" id="menuBtn"></i>