是否有可能让Twitter Bootstrap Dropdown菜单淡入？

Question

我试图让Twitter Bootstrap上的标准导航栏下拉菜单淡入而不是只显示.我已经尝试添加类fade,in但它似乎并没有消失.这是我的小提琴http://jsfiddle.net/byronyasgur/5zr4r/10/.

我尝试过另一种方式 - 例如关于这个问题的答案,但由于某些原因我无法使用jquery来定位下拉触发器.

Answer 1

玩弄它,看起来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.

Answer 2

我想提交一个现代的,仅限CSS的方法:

.dropdown-menu.fade {
  display: block;
  opacity: 0;
  pointer-events: none;
}
.open > .dropdown-menu.fade {
  pointer-events: auto;
  opacity: 1;
}

这允许.fade处理过渡动画,但是.open控制不透明度和指针状态.

Answer 3

对Jason Featheringham的答案进行了小调整,该答案适用于Bootstrap 4.

.dropdown-menu.fade {
   display: block;
   opacity: 0;
   pointer-events: none;
}

.show > .dropdown-menu.fade {
   pointer-events: auto;
   opacity: 1;
}

Answer 4

也许用jQuery做这样的事情:

$(function() {
    $('.dropdown-toggle').click(function() {
        $(this).next('.dropdown-menu').fadeToggle(500);
    });
});?

你可以在这里找小提琴:http://jsfiddle.net/5zr4r/15/

更新:我忘了说,你应该删除fade in从ul.

Answer 5

我找到了很好的解决方案:

// 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