bootstrap 3 mobile collapse fade in and out on toggle - html

Question

0Is there anyway of replacing the slide down animation on the mobile navbar-collapse to fade in/out when called upon? I've tried using CSS keyframes and have managed to get the animation working but in reverse - instead of the the menu fading in and out when called upon, the menu is open when the page loads and fades out when the toggle button is pressed.
This is the nav html:
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="center">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar- collapse">
<i class="fa fa-bars fa-2x"></i>
</button>
</div>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Dierentuin</li>
<li>B-Roll</li>
<li>Carousel</li>
<li>Structural Curtains</li>
<li>Proxy</li>
<li>Art in the Underbelly</li>
<li>Suburbanism</li>
<li>Novelty</li>
<li>Album Covers</li>
<li>Fortyounce London</li>
<li>Covmns Clothing</li>
<li>Siobahn Palmer</li>
<li>Django Django</li>
<li>I like Trains</li>
<li>Glass Animals</li>
<li>Spring Offensive</li>
<li>Black Bird</li>
<li>Olympians</li>
<li>The Soft</li>
<li>Wordplay Issue #10</li>
</ul>
</div>
</nav>
The CSS is as follows:
.navbar-nav {
margin: 0;
min-height: auto;
}
.navbar-nav {
float: none!important;
}
.navbar-nav>li {
float: none;
}
.navbar-inverse {
background-color: transparent;
border-color: transparent;
}
.navbar-inverse .navbar-toggle:hover, .navbar-inverse .navbar-toggle:focus {
background-color: transparent;
}
.navbar-inverse .navbar-toggle {
border-color: transparent;
}
.nav>li{
display:inline-block;
}
.collapsing {
opacity: 0;
transition:opacity 0.3s linear;
-webkit-transition:opacity 0.3s linear;
-moz-transition:opacity 0.3s linear;
-o-transition:opacity 0.3s linear;
}
.navbar-collapse.collapse.in{
opacity:0;
transition:opacity 0.3s linear;
-webkit-transition:opacity 0.3s linear;
-moz-transition:opacity 0.3s linear;
-o-transition:opacity 0.3s linear;
}
.navbar-collapse.collapse{
opacity: 1;
transition:opacity 0.3s linear;
-webkit-transition:opacity 0.3s linear;
-moz-transition:opacity 0.3s linear;
-o-transition:opacity 0.3s linear;
}
.navbar-collapse {
width: auto;
border-top: 0;
-webkit-box-shadow: none;
box-shadow: none;
margin-top: 194px;
max-height: none;
font-family:"aktiv-grotesk-std";
font-weight: 400;
line-height: 54px;
font-size: 60px;
display:block !important;
}
I'm still learning how to get to grips with Bootstrap 3, so any help would be gratefully received.

Answer 1

Since the collapse plugin modifies the height of the collapsable container you could override the height property using !important:
.navbar-collapse {
opacity: 0;
width: auto;
height: auto !important;
border-top: 0;
-webkit-box-shadow: none;
box-shadow: none;
margin-top: 194px;
max-height: none;
font-family:"aktiv-grotesk-std";
font-weight: 400;
line-height: 54px;
font-size: 60px;
display:block !important;
}
I also included an example on jsfiddle: http://jsfiddle.net/VVrPd/
You should also be careful when using !important, it's not a good practice: What are the implications of using "!important" in CSS?

Answer 2

This solution works better for me, and gets rid of setting the height auto and the !important rules:
.navbar-collapse {
transition: height 3s , opacity 0.3s ;
opacity: 0;
}
There is still a 'slide' transition, but the workaround is setting enough delay (in this case 3s) so will be invisible to the user