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

Question

我试图创建一个菜单，该菜单在click事件中滑出，然后在再次单击该元素时滑入。

这是我所拥有的代码笔。 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);
  }
});