1

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，因此我们将不胜感激地获得任何帮助。

4

2 回答 2

3

由于折叠插件修改了可折叠容器的高度，您可以使用 !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 时也应该小心，这不是一个好习惯：在 CSS 中使用“!important”有什么影响？

于 2014-07-20T19:30:43.957 回答
0

这个解决方案对我来说效果更好，并且摆脱了设置高度 auto 和 !important 规则：

.navbar-collapse {
    transition: height 3s , opacity 0.3s ;
    opacity: 0;
}

仍然存在“滑动”过渡，但解决方法是设置足够的延迟（在本例中为 3 秒），因此用户将看不到

于 2015-05-04T19:10:39.773 回答