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>

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

在我的代码段中，我没有添加任何@keyframes动画。 CSS transition属性负责处理幻灯片。

ToggleClass有两种动画方式。菜单滑入并滑出

1 个答案: