Как изменить анимацию выпадающего меню в бутстрапе?

Question

Я использую bootstrap и animate.css на своем веб-сайте. Возможно ли, что я изменил эффект появления подменю в меню начальной загрузки с помощью animate.css?

<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

Ну, я думаю, что это будет FULLFILL ваших потребностей:

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; 

} 

Cheers,

EDIT: Я обнаружил, что использование all вместо height даже гладко, как и одушевляет непрозрачность.