jquery - 使用 CSS 动画在点击事件上滑动菜单

Question

我正在尝试创建一个菜单，该菜单在单击事件时滑出，然后在再次单击该元素时滑回。

这是我所拥有的代码笔。 http://codepen.io/anon/pen/wWpjWa

和问题所在的 js:

 $('#menu-link').click(function(){
     $('#menu-link').toggleClass('slideIn');
     $('nav').toggleClass('slideIn');
     $('#menu-link').toggleClass('slideOut');
     $('nav').toggleClass('slideOut');
 });

自然地，两个动画会同时启动。

我知道这里的问题在于它同时切换 slideIn 和 slideOut 类。一种解决方案是将 slideOut 类添加到元素中。但这将在任何事件之前启动一次动画。 我经历了各种不太奏效的解决方案。我知道这很简单，但我只是想不出如何解决它。

Answer 1

您需要通过检查它的类来检查它是否已经出来(使用 hasClass() )。

$('#menu-link').click(function(){
  if( $("#menu-link").hasClass("slideIn") )
    {
      $('#menu-link').toggleClass('slideOut');
      $('nav').toggleClass('slideOut');  
    }
    else
    {
      $('#menu-link').toggleClass('slideIn');
      $('nav').toggleClass('slideIn');    
    }  
});

body {
  font-family: 'Roboto', 'Helvetica', sans-serif;
}

h1 {
  font-size: 3rem;
  font-weight: 700;
}

.wrapper {
  padding: 4rem;
  width: 70%;
  height: 100%;
  margin: 0 auto;
}

nav {
  height: 100%;
  background: #3385ff;
  width: 300px;
  position: fixed;
  left: -300px;
  border: none;
}

a,
a:hover,
a:visited {
  color: white;
  text-decoration: none;
}

ul {
  width: 50%;
  margin: 0 auto;
  list-style: none;
  font-size: 1.7rem;
}

li {
  text-align: center;
  padding-top: 70%;
}

#menu-link {
  position: absolute;
  color: #3385ff;
  padding: 10px;
  font-size: 4rem;
}


/*ANIMATIONS*/

.slideIn {
  animation: menuSlide .5s 1;
  animation-fill-mode: forwards;
}

.slideOut {
  animation: menuSlideOut .5s 1;
}

/*Keyframes*/

@keyframes menuSlide {
  from {
    transform: translateX(0px);
    transition-timing-function: ease-in;
  }
  to {
    transform: translateX(300px);
    transition-timing-function: ease-out;
  }
}

@keyframes menuSlideOut {
  from {
    transform: translateX(300px);
    transition-timing-function: ease-in;
  }
  to {
    transform: translateX(0px);
    transition-timing-function: ease-out;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<header>
  <nav role="navigation">

  </nav>
  <a href="#" id="menu-link">&#9776;</a>
</header>

<main>
</main>