javascript - 带有 CSS 动画问题的 jQuery 可点击下拉列表

Question

请查看这个 fiddle :https://jsfiddle.net/willbeeler/tfm8ohmw/

HTML:

<a href="#" class="roll-btn">Do it! Roll me down and up again!</a>
<ul class="roll-btns">
<li><a href="#" class="control animated noshow one">Milk</a></li>
<li><a href="#" class="control animated noshow two">Eggs and Cheese</a></li>
<li><a href="#" class="control animated noshow three">Bacon and Eggs</a></li>
<li><a href="#" class="control animated noshow four">Bread</a></li>
</ul> 

jQUERY

$('.roll-btn').click(function() {

    var ctrls = '.control';

    if ($(ctrls).hasClass('noshow')) 
  {
    $(ctrls).each(function() {
       $(this).removeClass('noshow');
       $(this).addClass('fadeInDown');
    });
    } else {
    $(ctrls).each(function() {
       $(this).removeClass('fadeInDown');
       $(this).addClass('fadeOutDown');
    });
  }

});

这是一件非常简单的事情，但我在实现它时遇到了麻烦。基本上，“noshow”类是 A 元素的开关。如果不存在，则将 CSS 动画添加到 A 元素。如果存在 CSS 动画，则添加另一个 css 元素以隐藏 A 元素。我试过延迟“noshow”类，其他方法都无济于事。整个示例在前两次点击时可以正常工作，但是因为它没有添加 noshow 类，所以之后就不能工作了。基本上，在 CSS 动画播放完毕后，我需要在第二次点击时添加 noshow 类。

Answer 1

$('.roll-btn').click(function() {

  var ctrls = '.control';

  if ($(ctrls).hasClass('noshow') || $(ctrls).hasClass('fadeOutDown')) {
    $(ctrls).each(function() {
      $(this).removeClass('noshow');
      $(this).addClass('fadeInDown');
      $(this).removeClass('fadeOutDown');
    });
  } else {
    $(ctrls).each(function() {
      $(this).removeClass('fadeInDown');
      $(this).addClass('fadeOutDown');
    });
  }
});