javascript - 向两个不同方向切换菜单

Question

我希望我的切换菜单从右到左滑动左侧内容，从左到右滑动右侧内容。我累了，我已经完成了，但是从错误的位置切换开始(菜单按钮的右侧)。然而，当我们再次单击菜单按钮时，左右内容会正确滑出。

这里链接到我的代码笔:http://codepen.io/EmilBuszylo/pen/bgQZQp

// Burger animation
$('.burger-menu').on('click', function() {
  if ($(this).hasClass("burger-menu-clicked")) {
    $(this).removeClass("burger-menu-clicked");
    $(this).addClass("burger-menu-closing");
  } else {
    $(this).addClass("burger-menu-clicked");
    $(this).removeClass("burger-menu-closing");
  }
});

// toggle menu
$('.burger-menu').click(function(){
  $('.nav-l').toggle('slide',{direction: 'right'} ,900);
  $('.nav-r').toggle('slide',{direction: 'left'} ,900);
});

* {
  box-sizing: border-box;
}

body {
  background: #4A96AD;
   width: 100%; 
  height: 100%;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
}

// hamburger button

[class^="line-"] {
  display: block;
  height: 7px;
  width: 50px;
  background: white;
  border-radius: 1px;
}

.burger-menu {
  display: inline-block;
  background: rgba(white, .15);
  border: 1px solid rgba(black, .15);
  padding: 9px;
  border-radius: 3px;
  transition: background .3s;
  text-align: center;
  &:hover {
    background: rgba(white, .2);
    cursor: pointer;
  }
  & .label {
    display: inline-block;
    font-size: 14px;
    line-height: 0;
    margin: 16px 0;
    letter-spacing: 0.15rem;
  }
}

.burger-menu-clicked {
  .line-1 {
    animation: menu-top .4s forwards ease-in-out;
  }
  .line-3 {
    animation: menu-bottom .4s forwards ease-in-out;
  }
  .label {
    opacity: 0;
  }
}

.burger-menu-closing {
  .line-1 {
    animation: menu-top-reverse .5s forwards ease-in-out;
  }
  .line-3 {
    animation: menu-bottom-reverse .5s forwards ease-in-out;
  }
  .label {
    transition: .5s;
    opacity: 1;
  }
}

@keyframes menu-top {
  0% {
    transform: rotate(0deg) translateY(0px);
  }
  50% {
    transform: rotate(0deg) translateY(20px);
  }
  100% {
    transform: translateY(20px) rotate(45deg);
  }
}

@keyframes menu-top-reverse {
  0% {
    transform: translateY(20px) rotate(45deg);
  }
  50% {
    transform: rotate(0deg) translateY(20px);
  }
  100% {
    transform: translateY(0px) rotate(0deg);
  }
}

@keyframes menu-bottom {
  0% {
    transform: rotate(0deg) translateY(0px);
  }
  50% {
    transform: rotate(0deg) translateY(-19px);
  }
  100% {
    transform: translateY(-19px) rotate(-45deg);
  }
}

@keyframes menu-bottom-reverse {
  0% {
    transform: translateY(-19px) rotate(-45deg);
  }
  50% {
    transform: rotate(0deg) translateY(-19px);
  }
  100% {
    transform: translateY(0px) rotate(0deg);
  }
}

// Menu
.top {
  height: 100%;
  margin:  0 auto;
  text-align: center;
  background-color: rgba(255, 233, 243, 0.4);
}
.over-menu {
  .nav-l {
     display:none;
  }
  .nav-r {
     display:none;
  }
  li {
    list-style-type: none;
    display: inline-block;
    margin-right: 35px;
    text-transform: uppercase;
  }
}
.show {
  opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="top">
  <nav>
    <ul class="over-menu">
        <li>
      <ul class="nav-l">
        <li>category1</li>
        <li>category2</li>
      </ul>
        </li>
        <li>
      <div class="burger-menu">
      <span class="line-1"></span>
      <span class="label">menu</span>
      <span class="line-3"></span>
      </div>
        </li>
        <li>
      <ul class="nav-r">
        <li>category3</li>
        <li>category4</li>
      </ul>
        </li>
    </ul> 
  </nav>
</div>

Answer 1

您的问题是 jquery 通过在隐藏元素上设置 display: none 来影响布局。我建议要么修复你的布局(最好使用 flex-box)，要么只使用像 animate.css 这样的库来制作这样的小动画。然后，您可以自己控制如何保存状态(关闭/打开)，而不是使用 display: none。