15

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

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

4

6 回答 6

30

玩弄这个，看起来 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 属性以制作更复杂的动画。例如，我一直在玩 left: -30 -> left: 0。

于 2013-03-19T20:10:46.800 回答
16

我想提交一个现代的、纯 CSS 的方法：

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

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

于 2015-10-12T21:20:44.483 回答
9

在 Bootstrap 4 中对 Jason Featheringham 的答案进行了小调整。

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

.show > .dropdown-menu.fade {
   pointer-events: auto;
   opacity: 1;
}
于 2017-12-27T05:18:11.300 回答
6

也许用 jQuery 做这样的事情：

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

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

更新：我忘了说你应该fade in从ul.

于 2012-12-11T23:08:45.190 回答
6

我也找到了很好的解决方案：

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

于 2015-01-02T21:15:54.563 回答
0

你可以试试这个：

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

于 2014-01-29T21:40:07.600 回答