双向动画切换类。菜单滑入和滑出

Question

我被卡住了，我根本不知道解决这个问题的最简单方法是什么。我正在尝试使用此脚本制作一个简单的滑入和滑出菜单：

$("#arrow").on("click", menuShowBtn);

function menuShowBtn() {
    console.log("menuShowBtn");
    $("#menu").toggleClass("menu_slut_pos");
    $("#arrow").toggleClass("arrow_rotate_again");
}

我做了一个 JSFiddle 向您展示问题。我只是需要动画双向播放，所以当再次切换时，动画会反转。

提前谢谢你！

Answer 1

$('.button').click(function() {
  var menu = $('.menu');
  menu.toggleClass('active')
});

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.bar {
  width: 50px;
  height: 5px;
  background-color: #ccc;
  display: block;
  margin: 10px 20px;
}

.button {
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 99;
  cursor: pointer;
}

.menu {
  height: 100%;
  background: #ff0000;
  position:fixed;
  top:0;
  left:-350px;
  width: 350px;
  transition: 0.5s all ease-in-out;
}

.active {
  left: 0px;
  transition: 0.5s all ease-in-out;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu">
  <div class="button">
    <span class="bar"></span>
    <span class="bar"></span>
    <span class="bar"></span>
  </div>
</div>

在您的代码中，动画指定菜单仅从 -350 像素向左移动到 0 像素。 toggleClass() 方法返回原始菜单状态，没有任何动画。

在我的 sn-p 中，我没有添加任何 @keyframes 动画。 CSS transition 属性负责幻灯片。