JS的动画切换(animation .css)

Question

我试图实现一个滑动菜单与按钮切换(toggleClass)。我不确定如何添加动画。我试着让它从顶部滑动(动画名称在a.css是slideInDown)

这是我的演示，所以你可以看到我有什么。

HTML

<!-- ========== Navigation ========== -->
<a type="button" class="btn btn-blue nav-btn"><i class="fa fa-bars"></i></a>
<div class="navbar navbar-fixed-top closed" role="navigation" id="top-header">
    <div class="container">
      <ul class="nav navbar-nav">
                <li class="active"><a class="scroll" href="#home">Home</a></li>
                <li><a class="scroll" href="#services">Services</a></li>
                <li><a class="scroll" href="#works">Works</a></li>
                <li><a class="scroll" href="#about">About</a></li>
                <li><a class="scroll" href="#timeline">Timeline</a></li>
                <li><a class="scroll" href="#blog">Blog</a></li>
                <li><a class="scroll" href="#contact">Contact</a></li>
            </ul>
    </div>
</div>
<!-- ========== /Navigation ========== -->

JS

// Open/close menu when button is clicked
$(".nav-btn").click(function () {
  $(".navbar").toggleClass('closed open');
  return true;
});

CSS代码片段

.open {
    display:block;
    visibility:visible;  
}
.closed {
    display:none;
    visibility:hidden;
}

(这是animate。css我在这个网站上通常使用的)

EDIT:基于@stewbydoo的回答(非常感谢!)我想到了:

// Open/close menu when button is clicked
$(".nav-btn").click(function () {
  if($(".navbar").hasClass("closed")){
    $(".navbar").removeClass("closed");
    $(".navbar").addClass("animated slideInDown");
  }else{
    $(".navbar").removeClass("animated slideInDown");
    $(".navbar").addClass("closed");
  }
});

看起来有点乱，但滑下来很好。现在我需要弄清楚如何让它再次(漂亮地)滑上来

Answer 1

我知道你想用animation。css来做这个。我很好，但以下是我提出的解决方案。它大约有10行JS和5行CSS。不管怎样，都是这样。而不是在CSS类之间切换。我们可以使用jQuery的动画函数和操作CSS的left属性。

JS

$(".nav-btn").click(function () {
  if($(".navbar").hasClass("closed")){
    $(".navbar").removeClass("closed");
    $(".navbar").animate({
      top: '0px'
    }, 1000);
  }else{
    $(".navbar").animate({
      top: '-100px'
    }, 1000);
    $(".navbar").addClass("closed");
  }
});

CSS

.navbar {
    display: block;
    min-height: 100px;
    border: none;
    background-color: #ffffff;
    -webkit-box-shadow: 0px 3px 2px 0px rgba(50, 50, 50, 0.2);
    -moz-box-shadow: 0px 3px 2px 0px rgba(50, 50, 50, 0.2);
    box-shadow: 0px 3px 2px 0px rgba(50, 50, 50, 0.2);
    position: fixed;
    top: -100px;
}
/* Comment this part out or just delete it. 
.closed {
    display:none;
    visibility:hidden;
}*/

我所做的就是向标记添加一个类，但是这个类实际上没有CSS意义。我注释掉了你的封闭类，因为这样做是没有必要的。我还添加了位置，并将顶部位置设置为-100px，以隐藏栏作为导航栏min-height是100px。

我使用类的所有目的是为了if语句检查它是否存在，以便我们可以轻松地打开和关闭菜单。这里是codepen的链接。希望这对你有帮助!