我试图让Twitter Bootstrap上的标准导航栏下拉菜单淡入而不是只显示。我尝试添加类fade
和in
但它似乎没有褪色。这是我的小提琴http://jsfiddle.net/byronyasgur/5zr4r/10/。
我尝试过另一种方式 - 例如this question上的答案,但由于某些原因我无法使用jquery来定位下拉触发器。
玩弄它,看起来CSS动画效果最好。
.open > .dropdown-menu {
animation-name: slidenavAnimation;
animation-duration:.2s;
animation-iteration-count: 1;
animation-timing-function: ease;
animation-fill-mode: forwards;
-webkit-animation-name: slidenavAnimation;
-webkit-animation-duration:.2s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease;
-webkit-animation-fill-mode: forwards;
-moz-animation-name: slidenavAnimation;
-moz-animation-duration:.2s;
-moz-animation-iteration-count: 1;
-moz-animation-timing-function: ease;
-moz-animation-fill-mode: forwards;
}
@keyframes slidenavAnimation {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@-webkit-keyframes slidenavAnimation {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
您可以添加其他CSS属性以制作更复杂的动画。例如,我一直在玩左:-30 - >左:0。
我想提交一个现代的,仅限CSS的方法:
.dropdown-menu.fade {
display: block;
opacity: 0;
pointer-events: none;
}
.open > .dropdown-menu.fade {
pointer-events: auto;
opacity: 1;
}
这允许.fade
处理过渡动画,但.open
控制不透明度和指针状态。
也许用jQuery做这样的事情:
$(function() {
$('.dropdown-toggle').click(function() {
$(this).next('.dropdown-menu').fadeToggle(500);
});
});
你可以在这里查看小提琴:qazxsw poi
更新:我忘了说你应该从http://jsfiddle.net/5zr4r/15/删除fade
in
。
小调整到Jason Featheringham的ul
,它在Bootstrap 4中运行。
answer
我找到了很好的解决方案:
.dropdown-menu.fade {
display: block;
opacity: 0;
pointer-events: none;
}
.show > .dropdown-menu.fade {
pointer-events: auto;
opacity: 1;
}
示例:// Add slideDown animation to dropdown
$('.dropdown').on('show.bs.dropdown', function(e){
$(this).find('.dropdown-menu').first().stop(true, true).slideDown();
});
// Add slideUp animation to dropdown
$('.dropdown').on('hide.bs.dropdown', function(e){
$(this).find('.dropdown-menu').first().stop(true, true).slideUp();
});
你可以试试这个:
http://codepen.io/danielyewright/pen/EvckL
它利用Bootstrap现有的// Add fadeToggle animation to dropdown
$('.dropdown').on('show.bs.dropdown', function(e) {
$(this).find('.dropdown-menu').first().stop(true, true).fadeToggle(500);
});
// Add fadeToggle animation to dropdown
$('.dropdown').on('hide.bs.dropdown', function(e) {
$(this).find('.dropdown-menu').first().stop(true, true).fadeToggle(500);
});
和show.bs.dropdown
函数,并将下拉效果更改为“淡入淡出”而不是“出现”。如果你想要一个“幻灯片”,你也可以将hide.bs.dropdown
更改为fadeToggle()
。希望这可以帮助。
这是小提琴:slideDown()