bootstrap 如何更改下拉菜单的动画?
How to change the animation of the dropdown menu in bootstrap?
我在我的网站皮肤中使用 bootstrap 和 animate.css。这可能是我用 animate.css 改变 bootstrap 菜单中出现子菜单的效果吗?
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="./">Default <span class="sr-only">(current)</span></a></li>
<li><a href="../navbar-static-top/">Static top</a></li>
<li><a href="../navbar-fixed-top/">Fixed top</a></li>
</ul>
</div>
好吧,我认为这将满足您的需求:
代码(JS):
$('.dropdown-menu').addClass('invisible'); //FIRST TIME INVISIBLE
// ADD SLIDEDOWN ANIMATION TO DROPDOWN-MENU
$('.dropdown').on('show.bs.dropdown', function(e){
$('.dropdown-menu').removeClass('invisible');
$(this).find('.dropdown-menu').first().stop(true, true).slideDown();
});
// ADD SLIDEUP ANIMATION TO DROPDOWN-MENU
$('.dropdown').on('hide.bs.dropdown', function(e){
$(this).find('.dropdown-menu').first().stop(true, true).slideUp();
});
除了添加上面的 javascript,您还可以尝试添加此 CSS 代码:
代码 (CSS):
.dropdown .dropdown-menu {
height: 0px;
display: block;
overflow: hidden;
opacity:0;
-webkit-transition: height 1s ease;
-moz-transition: height 1s ease;
-ms-transition: height 1s ease;
-o-transition: height 1s ease;
transition: height 1s ease;
}
.dropdown.open .dropdown-menu {
height:200px;
opacity: 1;
}
干杯,
编辑: 我发现使用 all
而不是 height
甚至更流畅,因为它也使不透明度动画化。
无需使用幻灯片或其他解决方法这是一个简单的解决方案:
- 将animate.css添加到您的项目中(google大家都知道)
- 将动画class添加到您的下拉菜单
使用下面一段Js:(show()很重要)
$('.dropdown').on('show.bs.dropdown', function(e){
$(this).find('.dropdown-menu').removeClass('lightSpeedOut').addClass('lightSpeedIn').show();
});
$('.dropdown').on('hide.bs.dropdown', function(e){
$(this).find('.dropdown-menu').removeClass('lightSpeedIn').addClass('lightSpeedOut');
});
已使用 Bootstrap 4.3.1(当前最新版本)进行测试 应该也适用于 Bootstrap 3.x
我在我的网站皮肤中使用 bootstrap 和 animate.css。这可能是我用 animate.css 改变 bootstrap 菜单中出现子菜单的效果吗?
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="./">Default <span class="sr-only">(current)</span></a></li>
<li><a href="../navbar-static-top/">Static top</a></li>
<li><a href="../navbar-fixed-top/">Fixed top</a></li>
</ul>
</div>
好吧,我认为这将满足您的需求:
代码(JS):
$('.dropdown-menu').addClass('invisible'); //FIRST TIME INVISIBLE
// ADD SLIDEDOWN ANIMATION TO DROPDOWN-MENU
$('.dropdown').on('show.bs.dropdown', function(e){
$('.dropdown-menu').removeClass('invisible');
$(this).find('.dropdown-menu').first().stop(true, true).slideDown();
});
// ADD SLIDEUP ANIMATION TO DROPDOWN-MENU
$('.dropdown').on('hide.bs.dropdown', function(e){
$(this).find('.dropdown-menu').first().stop(true, true).slideUp();
});
除了添加上面的 javascript,您还可以尝试添加此 CSS 代码:
代码 (CSS):
.dropdown .dropdown-menu {
height: 0px;
display: block;
overflow: hidden;
opacity:0;
-webkit-transition: height 1s ease;
-moz-transition: height 1s ease;
-ms-transition: height 1s ease;
-o-transition: height 1s ease;
transition: height 1s ease;
}
.dropdown.open .dropdown-menu {
height:200px;
opacity: 1;
}
干杯,
编辑: 我发现使用 all
而不是 height
甚至更流畅,因为它也使不透明度动画化。
无需使用幻灯片或其他解决方法这是一个简单的解决方案:
- 将animate.css添加到您的项目中(google大家都知道)
- 将动画class添加到您的下拉菜单
使用下面一段Js:(show()很重要)
$('.dropdown').on('show.bs.dropdown', function(e){ $(this).find('.dropdown-menu').removeClass('lightSpeedOut').addClass('lightSpeedIn').show(); }); $('.dropdown').on('hide.bs.dropdown', function(e){ $(this).find('.dropdown-menu').removeClass('lightSpeedIn').addClass('lightSpeedOut'); });
已使用 Bootstrap 4.3.1(当前最新版本)进行测试 应该也适用于 Bootstrap 3.x