bootstrap 3 mobile collapse fade in and out on toggle

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"><a href="#">Home</a></li>
<li><a href="#">Dierentuin</a></li>
<li><a href="#">B-Roll</a></li>
<li><a href="#">Carousel</a></li>
<li><a href="#">Structural Curtains</a></li>
<li><a href="#">Proxy</a></li>
<li><a href="#">Art in the Underbelly</a></li>
<li><a href="#">Suburbanism</a></li>
<li><a href="#">Novelty</a></li>
<li><a href="#">Album Covers</a></li>
<li><a href="#">Fortyounce London</a></li>
<li><a href="#">Covmns Clothing</a></li>
<li><a href="#">Siobahn Palmer</a></li>
<li><a href="#">Django Django</a></li>
<li><a href="#">I like Trains</a></li>
<li><a href="#">Glass Animals</a></li>
<li><a href="#">Spring Offensive</a></li>
<li><a href="#">Black Bird</a></li>
<li><a href="#">Olympians</a></li>
<li><a href="#">The Soft</a></li>
<li><a href="#">Wordplay Issue #10</a></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?