是否有可能让Twitter Bootstrap Dropdown菜单淡入？
我试图让Twitter Bootstrap上的标准导航栏下拉菜单淡入而不是只显示。 我已经尝试添加fade的类但它似乎没有消失。 这是我的小提琴http://jsfiddle.net/byronyasgur/5zr4r/10/ 。
我尝试过另一种方式 – 例如关于这个问题的答案，但由于某些原因我无法使用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); }); });
你可以在这里找小提琴： http ： //jsfiddle.net/5zr4r/15/
更新：我忘了说你应该从ul删除fade 。
我找到了很好的解决方案：
// 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
对Jason Featheringham的答案进行了小调整，该答案适用于Bootstrap 4。
.dropdown-menu.fade { display: block; opacity: 0; pointer-events: none; } .show > .dropdown-menu.fade { pointer-events: auto; opacity: 1; }
你可以试试这个：
// 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); });
它利用Bootstrap现有的show.bs.dropdown和hide.bs.dropdown函数，并将下拉效果更改为“淡入淡出”而不是“出现”。 如果要生效“幻灯片”，还可以将fadeToggle()更改为slideDown() 。 希望这可以帮助。
这是小提琴： http ： //jsfiddle.net/ck5c8/