使用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>

​

Answer 2

试试这个人：

$('#menu-link').click(function(){
  var menuActive = $('#menu-link').data('active');

  if(menuActive) {
    $('#menu-link').toggleClass('slideOut');
    $('nav').toggleClass('slideOut');
    $('#menu-link').removeClass('active');
 } else { 
    $('#menu-link').toggleClass('slideIn');
    $('nav').toggleClass('slideIn');
    $('#menu-link').data('active', true);
  }
});