移动平滑关闭动画引导菜单下拉菜单
我在Bootstrap 3 navbar-collapse中有下拉列表,我想在打开和关闭时顺利地进行动画制作。当在宽度较大的设备上查看时,我发现JavaScript和CSS animation解决方案都很棒。但是当它在手机中崩溃时,关闭下拉列表看起来很糟糕。当它崩溃时,它回到看起来像一个标准的下拉列表。移动平滑关闭动画引导菜单下拉菜单
In this JSFiddle,请尝试缩小输出窗口,使菜单折叠到移动模式。然后,点击“汉堡”图标并打开并关闭“Some Stuff”下拉菜单。正如你所看到的,打开时看起来很棒,但关闭时很糟糕。我已经尝试了很多修补,但无济于事。有关在移动模式下如何使其平滑的任何想法?
注意:我更喜欢CSS答案,但如果这就是它的要求,我会使用JavaScript。
HTML
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="#">Home</a></li>
<li>
<div class="navbar-nav-divider"></div>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" style="margin-bottom: 0;">
Some Stuff <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">Option 1</a></li>
<li><a href="#">Option 2</a></li>
<li><a href="#">Option 3</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</nav>
CSS
.dropdown .dropdown-menu {
-webkit-transition: max-height 0.3s, opacity 0.2s 0.1s, visibility 0s 0.3s;
-moz-transition: max-height 0.3s, opacity 0.2s 0.1s, visibility 0s 0.3s;
-ms-transition: max-height 0.3s, opacity 0.2s 0.1s, visibility 0s 0.3s;
-o-transition: max-height 0.3s, opacity 0.2s 0.1s, visibility 0s 0.3s;
transition: max-height 0.3s, opacity 0.2s 0.1s, visibility 0s 0.3s;
max-height: 0;
display: block;
overflow: hidden;
opacity: 0;
visibility: hidden;
}
.dropdown.open .dropdown-menu {
-webkit-transition: max-height 0.3s, opacity 0.2s, visibility 0s;
-moz-transition: max-height 0.3s, opacity 0.2s, visibility 0s;
-ms-transition: max-height 0.3s, opacity 0.2s, visibility 0s;
-o-transition: max-height 0.3s, opacity 0.2s, visibility 0s;
transition: max-height 0.3s, opacity 0.2s, visibility 0s;
max-height: 120px;
opacity: 1;
visibility: visible;
}
编辑:
我可以跳过关闭动画解决这个问题,而在移动模式,所以它至少没有按”看起来很可怕。不过,我并不认为这是一个解决方案,只是一种解决方法。为了实现它,我做了我的第一次两个CSS块看起来像这个:
.dropdown .dropdown-menu {
max-height: 0;
display: block;
overflow: hidden;
opacity: 0;
visibility: hidden;
}
@media (min-width: 768px) {
.dropdown .dropdown-menu {
-webkit-transition: max-height 0.3s, opacity 0.2s 0.1s, visibility 0s 0.3s;
-moz-transition: max-height 0.3s, opacity 0.2s 0.1s, visibility 0s 0.3s;
-ms-transition: max-height 0.3s, opacity 0.2s 0.1s, visibility 0s 0.3s;
-o-transition: max-height 0.3s, opacity 0.2s 0.1s, visibility 0s 0.3s;
transition: max-height 0.3s, opacity 0.2s 0.1s, visibility 0s 0.3s;
}
}
使用@ AndrewBone的,如果你没有访问引导3 LESS源代码,他的回答是插件和播放解决方案。我的答案稍微有点高性能,因为它只增加了很少的CSS,而只对“根”样式稍作修改。
步骤:
- 转到
navbar.less
。 - 查找选择器
.open .dropdown-menu
的每个参考,并从中删除.open
,这样选择器只会说.dropdown-menu
。这将允许CSS应用于移动下拉菜单,同时打开和关闭。
这解决了造型/动画问题,但由于ul.dropdown-menu
元素中的填充造成间隙。我们将通过在ul
上打零填充(:not(.open) .dropdown-menu
)并对填充进行动画处理来解决这个问题,所以它看起来不会太过激动。
-
将问题中的自定义CSS替换为以下内容。
.navbar-nav .dropdown-menu { -webkit-transition: max-height 0.4s, opacity 0.3s 0.1s, visibility 0s 0.3s, padding 0.4s ease; -moz-transition: max-height 0.4s, opacity 0.3s 0.1s, visibility 0s 0.3s, padding 0.4s ease; -ms-transition: max-height 0.4s, opacity 0.3s 0.1s, visibility 0s 0.3s, padding 0.4s ease; -o-transition: max-height 0.4s, opacity 0.3s 0.1s, visibility 0s 0.3s, padding 0.4s ease; transition: max-height 0.4s, opacity 0.3s 0.1s, visibility 0s 0.3s, padding 0.4s ease; max-height: 0; display: block; overflow: hidden; opacity: 0; visibility: hidden; } .navbar-nav .dropdown.open .dropdown-menu { -webkit-transition: max-height 0.4s, opacity 0.1s, visibility 0s, padding 0.2s ease; -moz-transition: max-height 0.4s, opacity 0.1s, visibility 0s, padding 0.2s ease; -ms-transition: max-height 0.4s, opacity 0.1s, visibility 0s, padding 0.2s ease; -o-transition: max-height 0.4s, opacity 0.1s, visibility 0s, padding 0.2s ease; transition: max-height 0.4s, opacity 0.1s, visibility 0s, padding 0.2s ease; max-height: 120px; opacity: 1; visibility: visible; } .navbar-nav .dropdown:not(.open) .dropdown-menu { padding: 0 !important; }
就是这样!现在,我们在移动和全屏模式下都可以使用流畅的CSS动画,并且只需要处理最少的额外CSS。
添加到您的CSS所以它保持它的风格,即使它关闭。
@media (max-width: 767px) {
.navbar-nav .dropdown-menu {
position: static;
float: none;
width: auto;
margin-top: 0;
background-color: transparent;
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
.navbar-nav .dropdown-menu>li>a {
padding: 5px 15px 5px 25px;
color: #777;
}
}
这是在行动(Fiddle)
感谢您的回答。有一个小错误 - 当ul全部关闭时,“ul”上的填充会产生一个微小的差距。我最终找出了我自己的方式,但是我的解决方案仅适用于使用引导LESS代码的情况,并且会导致需要处理的CSS少一点。我会接受你的答案,因为它是最简单的实现方式,不需要修改LESS,但我也将自己的解决方案作为单独的答案发布。 –