html - Bootstrap 3移动折叠在切换时淡入淡出

Question

0是否有办法替换移动导航栏上的向下滑动动画 - 折叠以在调用时淡入/淡出？我尝试过使用 CSS 关键帧并设法使动画正常工作，但相反 - 菜单不是在调用时淡入和淡出，而是在页面加载时打开，并在按下切换按钮时淡出。

这是导航 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>

CSS如下:

.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;
}

我仍在学习如何掌握 Bootstrap 3，因此我们将不胜感激。

Answer 1

由于折叠插件修改了可折叠容器的高度，因此您可以使用 !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;
}

我还在 jsfiddle 上添加了一个示例:http://jsfiddle.net/VVrPd/

使用 !important 时也应该小心，这不是一个好的做法:What are the implications of using "!important" in CSS?