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

试试这个男人：

$(offers).filter("div.notspecial:lt(4)").slideUp();

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

2 个答案: