title: Bootstrap 3 Collapsible Menu is not Animating Slide in/out
body: <p>I'm trying to get a navbar fixed at the top of my page to animate (slide in/out) when it appears and reappears. I'd also like it to collapse when viewed on mobile devices.</p>
  
  <p>I'm just starting with bootstrap and most of the code is from a tutorial, including the button which appears when the screen and displays a drop down.</p>
  
  <p>When I call collapse('toggle') there isn't any animation, even though to docs seem to suggest there is supposed to be an animation (<a href="http://getbootstrap.com/javascript/#collapse" rel="nofollow">http://getbootstrap.com/javascript/#collapse</a> talks about the time between when it starts hiding and is hidden)</p>
  
  <p>I'm using flat ui, though removing it doesn't solve the problem. I also tried removing everything in the button besides the navbar-brand link; it still doesn't animate. I tried seeing if the panel-collapse or navbar-collapse classes would make it animate, also didn't work.</p>
  
  <p>Is there a quick fix to this problem? Should I manually be coding this animation?</p>
  
  <p>Here's the html/js code I'm using:</p>
  
  <pre><code>&lt;script src="bower_components/jquery/dist/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="bower_components/bootstrap/dist/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
    $(document).ready(function() {
  
     $(document).click(function() {
       $("#lyla-nav").collapse('toggle')
     });
    });
  
  &lt;/script&gt;
  &lt;div id="lyla-nav" class="navbar navbar-default navbar-fixed-top collapse nav-collapse"&gt;
    &lt;div class="container"&gt;
      &lt;button data-toggle="collapse" data-target=".navbar-collapse" class="navbar-toggle"&gt;
        &lt;!--literally is making each line inside of the button--&gt;&lt;span class="icon-bar"&gt;&lt;/span&gt;&lt;span class="icon-bar"&gt;&lt;/span&gt;&lt;span class="icon-bar"&gt;&lt;/span&gt;
      &lt;/button&gt;&lt;a href="#" class="navbar-brand"&gt;Welcome&lt;/a&gt;
      &lt;div class="collapse navbar-collapse"&gt;
        &lt;ul class="nav navbar-nav navbar-right"&gt;
          &lt;li class="active"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Link 1&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Link 2&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Link 3&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Thank you in advance!</p>