Bootstrap 3 Collapsible Menu is not Animating Slide in/out - css

Question

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.
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.
When I call collapse('toggle') there isn't any animation, even though to docs seem to suggest there is supposed to be an animation (http://getbootstrap.com/javascript/#collapse talks about the time between when it starts hiding and is hidden)
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.
Is there a quick fix to this problem? Should I manually be coding this animation?
Here's the html/js code I'm using:
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(document).click(function() {
$("#lyla-nav").collapse('toggle')
});
});
</script>
<div id="lyla-nav" class="navbar navbar-default navbar-fixed-top collapse nav-collapse">
<div class="container">
<button data-toggle="collapse" data-target=".navbar-collapse" class="navbar-toggle">
<!--literally is making each line inside of the button--><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
</button>Welcome
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</div>
</div>
</div>
Thank you in advance!