jQuery 是否可以让 Twitter Bootstrap 下拉菜单淡入？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13829805/
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
Is it possible to get Twitter Bootstrap Dropdown menus to fade in?
提问by byronyasgur
I am trying to get the standard navbar dropdown menu on Twitter Bootstrap to fade in instead of just appear. I have tried adding the classes fadeand inbut it doesn't appear to fade. Here is my fiddle http://jsfiddle.net/byronyasgur/5zr4r/10/.
我试图让 Twitter Bootstrap 上的标准导航栏下拉菜单淡入而不是出现。我曾尝试添加类fade，in但它似乎没有消失。这是我的小提琴http://jsfiddle.net/byronyasgur/5zr4r/10/。
I have tried going about it another way - eg the answer on this questionbut I'm having trouble targeting the dropdown trigger with jquery for some reason.
我尝试过另一种方式 - 例如这个问题的答案，但由于某种原因，我无法使用 jquery 定位下拉触发器。
回答by Benjamin Kahn
Playing around with this, it looks like CSS animations work the best.
玩弄这个，看起来 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;
}
}
You can add other CSS properties in order to make more complicated animations. For example, I've been playing with left: -30 -> left: 0.
您可以添加其他 CSS 属性以制作更复杂的动画。例如，我一直在玩 left: -30 -> left: 0。
回答by Jason T Featheringham
I'd like to submit a modern, CSS-only approach:
我想提交一种现代的、仅使用 CSS 的方法：
.dropdown-menu.fade {
display: block;
opacity: 0;
pointer-events: none;
}
.open > .dropdown-menu.fade {
pointer-events: auto;
opacity: 1;
}
This allows .fadeto handle the transition animation, but .openis what controls the opacity and pointer state.
这允许.fade处理过渡动画，但.open控制不透明度和指针状态。
回答by Stu
回答by Nerjuz
I found nice solution too:
我也找到了很好的解决方案：
// 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();
});
回答by Dim13i
Maybe doing something like this with jQuery:
也许用 jQuery 做这样的事情：
$(function() {
$('.dropdown-toggle').click(function() {
$(this).next('.dropdown-menu').fadeToggle(500);
});
});?
You can chek the fiddle here: http://jsfiddle.net/5zr4r/15/
你可以在这里检查小提琴：http: //jsfiddle.net/5zr4r/15/
UPDATE:I forgot to say that you should remove the fadeinfrom the ul.
更新：我忘了说你应该fadein从ul.
回答by Daniely Wright
You can try this:
你可以试试这个：
// 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);
});
It utilizes Bootstrap's existing show.bs.dropdownand hide.bs.dropdownfunctions and changes the dropdown effect to "fade" in instead of "appear". You can also change fadeToggle()to slideDown()if you want a "slide" in effect. Hope this helps.
它利用 Bootstrap 的现有show.bs.dropdown和hide.bs.dropdown功能，将下拉效果更改为“淡入”而不是“出现”。如果您希望“幻灯片”生效，您也可以更改fadeToggle()为slideDown()。希望这可以帮助。
Here is the fiddle: http://jsfiddle.net/ck5c8/
这是小提琴：http: //jsfiddle.net/ck5c8/
