twitter-bootstrap Bootstrap 3 移动折叠在切换时淡入淡出
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24852121/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
bootstrap 3 mobile collapse fade in and out on toggle
提问by MattZapp132
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.
0是否有替换移动导航栏折叠上的下滑动画以在调用时淡入/淡出？我尝试使用 CSS 关键帧并设法使动画正常工作，但相反 - 不是菜单在调用时淡入淡出，而是在页面加载时打开菜单，并在按下切换按钮时淡出。
This is the nav html:
这是导航 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:
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;
}
I'm still learning how to get to grips with Bootstrap 3, so any help would be gratefully received.
我仍在学习如何掌握 Bootstrap 3，因此将不胜感激地收到任何帮助。
回答by miron
Since the collapse plugin modifies the height of the collapsable container you could override the height property using !important:
由于折叠插件会修改可折叠容器的高度，因此您可以使用 !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/
我还包括一个关于 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?
使用 !important 时也应该小心，这不是一个好习惯：在 CSS 中使用“!important”有什么含义？
回答by Ignacio Vazquez
This solution works better for me, and gets rid of setting the height auto and the !important rules:
这个解决方案对我来说效果更好，并且摆脱了设置高度 auto 和 !important 的规则：
.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
仍然存在“幻灯片”过渡，但解决方法是设置足够的延迟（在本例中为 3 秒），因此用户将不可见
