如何更改引导程序中下拉菜单的动画？

Question

我在我的网站皮肤中使用 bootstrap 和 animate.css。这可能是我用 animate.css 改变 bootstrap 菜单中出现子菜单的效果吗？

<div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
              <li class="active"><a href="#">Home</a></li>
              <li><a href="#">About</a></li>
              <li><a href="#">Contact</a></li>
              <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                <ul class="dropdown-menu">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li role="separator" class="divider"></li>
                  <li class="dropdown-header">Nav header</li>
                  <li><a href="#">Separated link</a></li>
                  <li><a href="#">One more separated link</a></li>
                </ul>
              </li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
              <li class="active"><a href="./">Default <span class="sr-only">(current)</span></a></li>
              <li><a href="../navbar-static-top/">Static top</a></li>
              <li><a href="../navbar-fixed-top/">Fixed top</a></li>
            </ul>
          </div>

Answer 1

好吧，我认为这将满足您的需求：

DEMO

代码（JS）：

$('.dropdown-menu').addClass('invisible'); //FIRST TIME INVISIBLE

// ADD SLIDEDOWN ANIMATION TO DROPDOWN-MENU 
  $('.dropdown').on('show.bs.dropdown', function(e){
    $('.dropdown-menu').removeClass('invisible');
    $(this).find('.dropdown-menu').first().stop(true, true).slideDown();
  });

  // ADD SLIDEUP ANIMATION TO DROPDOWN-MENU 
  $('.dropdown').on('hide.bs.dropdown', function(e){
    $(this).find('.dropdown-menu').first().stop(true, true).slideUp();
  });

除了添加上面的 javascript，您还可以尝试添加以下 CSS 代码：

DEMO_2

代码（CSS）：

.dropdown .dropdown-menu {
    height: 0px;
    display: block;
    overflow: hidden;
    opacity:0;
-webkit-transition: height 1s ease;
-moz-transition: height 1s ease;
-ms-transition: height 1s ease;
-o-transition: height 1s ease;
transition: height 1s ease;

}


.dropdown.open .dropdown-menu {
    height:200px;
    opacity: 1;

}

干杯，

编辑：我发现使用all 代替height 甚至更平滑，因为它还可以为不透明度设置动画。

Answer 2

无需使用幻灯片或其他解决方法这是一个简单的解决方案：

1. 将 animate.css 添加到您的项目中（谷歌一下大家都知道）
2. 将 animated 类添加到您的下拉菜单中

3. 使用下面这段Js：（show()很重要）

   $('.dropdown').on('show.bs.dropdown', function(e){
       $(this).find('.dropdown-menu').removeClass('lightSpeedOut').addClass('lightSpeedIn').show();
   });
   
   $('.dropdown').on('hide.bs.dropdown', function(e){
       $(this).find('.dropdown-menu').removeClass('lightSpeedIn').addClass('lightSpeedOut');
   });
   

   使用 Bootstrap 4.3.1 测试（当前最新）应该也适用于 Bootstrap 3.x