使用 AngularStrap 的响应式导航栏折叠动画

Question

我正在尝试使用 AngularStrap 重新创建可折叠 Bootstrap responsive navbar。

这里是plunker:

<div class="navbar navbar-inverse">
  <div class="container" bs-collapse start-collapsed="true">
      <div class="navbar-header">
          <button class="navbar-toggle" type="button" bs-collapse-toggle>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
          </button>
      </div>
      <div bs-collapse-target>
          <ul class="nav navbar-nav">
              <li>
                  <a href="#">Link</a>
              </li>
              <li>
                  <a href="#">Link</a>
              </li>
          </ul>
      </div>
  </div>
</div>

bs-collapse 指令很容易适合 Bootstrap navbar，但它不支持开箱即用的折叠动画。

如何实现？

有没有一种方法可以遵循 Bootstrap 工作流程并利用其 .collapsing 动画而不是重新发明轮子（但是使用它的简单 LESS/SASS mixin 是也可以)?

Answer 1

要使动画正常运行，您可能需要包含 angular-motion 和属于 angular-motion package 的 angular-motion.min.css 文件。对 CSS 文件的引用不是主要文档的一部分。当我遇到类似问题时，我很确定我在 Whosebug 上找到了对它的引用。