Responsive navbar collapsing animation with AngularStrap

Question

I'm trying to recreate collapsible Bootstrap responsive navbar with AngularStrap.

Here is 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 directive fits Bootstrap navbar quite easily, but it doesn't support collapsing animation out of the box.

How it can be done?

Is there a way to do this following Bootstrap workflow and utilizing its .collapsing animation instead of re-inventing the wheel (but simple LESS/SASS mixin that makes use of it is also fine)?

Answer 1

To get the animations working, you may need to include angular-motion AND the angular-motion.min.css file that's part of the angular-motion package. The reference to the CSS file isn't part of the main documentation. I'm pretty sure I found references to it here on StackOverflow when I had similar issues.