JS切换动画（animate.css）？答案

【问题标题】：JS toggle with animation (animate.css)?JS切换动画（animate.css）？
【发布时间】：2014-03-27 19:33:37
【问题描述】：

我正在尝试使用按钮切换 (toggleClass) 实现滑入式菜单。我不确定如何添加动画。我试图让它从顶部滑入（a.css 中的动画名称是slideInDown）

这是我的demo，所以你可以看看我有什么。

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 ========== -->

// 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，我通常用于该网站）

编辑：根据@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");
  }
});

看起来有点凌乱，但滑下来就好了。现在我需要弄清楚如何让它再次（很好地）向上滑动:)

【问题讨论】：

你想让它从左上右下滑入吗？
在问题中发布您的代码。
@stewbydoo 从顶部（但最终没关系）

标签： javascript jquery html css animation

【解决方案1】：

好的，我知道您想为此使用 animate.css。我很好，但下面是我提出的解决方案。它大约 10 行 JS 和 5 行 CSS。无论哪种方式，它都是。而不是在 CSS 类之间切换。我们可以只使用 jQuery animate 函数并操作 CSS left 属性。

$(".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 的链接。希望这会有所帮助！

【讨论】：