ブートストラップのドロップダウンメニュー表示：アニメーションの終了後になし

Question

ドロップダウンメニューとアニメーションとして1つのボタンがあり、ドロップダウンの表示と非表示を切り替えることができます。 どのようにアニメーションをチェックする仕上がりで、スタイルの表示を追加：なしにあるドロップダウン・メニュー

HTML

<div class="dropdown"> 
    <button class="btn btn-default dropdown-toggle " type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> 
    Dropdown 
    <span class="caret"></span> 
    </button> 
    <ul class="dropdown-menu dropdown-info" aria-labelledby="dropdownMenu1"> 
    <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><a href="#">Separated link</a></li> 
    </ul> 
</div> 

CSS

.open > .dropdown-menu.dropdown-info { 
    opacity: 1; 
    left: 0px; 
} 
.dropdown-menu.dropdown-info { 
    display: block; 
    position: absolute; 
    top:70px; 
    left: 30px; 
    opacity: 0; 
    transition: all 0.2s ease-out; 
    -webkit-transition: all 0.2s ease-out; 
} 

Answer 1

更新：

私はついにあなたを得ました質問、私は一度のアニメーション効果をどのように実装したのかを以下のフィドルで確認してください。

JSFiddle Demo

これはあなたの問題を修正する場合は私に知らせてください！

旧：

これはあなたの必要性をsatifyしていますか？

デフォルトでは、要素に（display:none）を残して、メニューを開くときに（display:block）を設定します。

.open > .dropdown-menu.dropdown-info { 
 
    opacity: 1; 
 
    left: 0px; 
 
    display: block; 
 
} 
 
.dropdown-menu.dropdown-info { 
 
    display:none; 
 
    position: absolute; 
 
    left: 30px; 
 
    opacity: 0; 
 
    transition: all 0.2s ease-out; 
 
    -webkit-transition: all 0.2s ease-out; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 
 
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="dropdown"> 
 
    <button class="btn btn-default dropdown-toggle " type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> 
 
    Dropdown 
 
    <span class="caret"></span> 
 
    </button> 
 
    <ul class="dropdown-menu dropdown-info" aria-labelledby="dropdownMenu1"> 
 
    <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><a href="#">Separated link</a></li> 
 
    </ul> 
 
</div>

Answer 2

var dropdownSelectors = $('.dropdown'); 
 

 

 
function dropdownEffectData(target) { 
 
    
 
    var effectInDefault = null, 
 
     effectOutDefault = null; 
 
    var dropdown = $(target), 
 
     dropdownMenu = $('.dropdown-menu', target); 
 
    var parentUl = dropdown.parents('ul.nav'); 
 

 

 
    if (parentUl.size() > 0) { 
 
    effectInDefault = parentUl.data('dropdown-in') || null; 
 
    effectOutDefault = parentUl.data('dropdown-out') || null; 
 
    } 
 
    
 
    return { 
 
    target:  target, 
 
    dropdown:  dropdown, 
 
    dropdownMenu: dropdownMenu, 
 
    effectIn:  dropdownMenu.data('dropdown-in') || effectInDefault, 
 
    effectOut: dropdownMenu.data('dropdown-out') || effectOutDefault, 
 
    }; 
 
} 
 

 
// Custom function to start effect (in or out) 
 
// ========================= 
 
function dropdownEffectStart(data, effectToStart) { 
 
    if (effectToStart) { 
 
    data.dropdown.addClass('dropdown-animating'); 
 
    data.dropdownMenu.addClass('animated'); 
 
    data.dropdownMenu.addClass(effectToStart);  
 
    } 
 
} 
 

 

 

 
// Bootstrap API hooks 
 
// ========================= 
 
dropdownSelectors.on({ 
 
    "show.bs.dropdown": function() { 
 
    // On show, start in effect 
 
    var dropdown = dropdownEffectData(this); 
 
    dropdownEffectStart(dropdown, dropdown.effectIn); 
 
    }, 
 
    "shown.bs.dropdown": function() { 
 
    // On shown, remove in effect once complete 
 
    var dropdown = dropdownEffectData(this); 
 
    if (dropdown.effectIn && dropdown.effectOut) { 
 
     dropdownEffectEnd(dropdown, function() {}); 
 
    } 
 
    }, 
 
    "hide.bs.dropdown": function(e) { 
 
    // On hide, start out effect 
 
    var dropdown = dropdownEffectData(this); 
 
    if (dropdown.effectOut) { 
 
     e.preventDefault(); 
 
     dropdownEffectStart(dropdown, dropdown.effectOut); 
 
     dropdownEffectEnd(dropdown, function() { 
 
     dropdown.dropdown.removeClass('open'); 
 
     }); 
 
    }  
 
    }, 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 

 
<link rel="stylesheet" 
 
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"> 
 
    
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"> 
 

 
<div class="dropdown"> 
 
    <button class="btn btn-default dropdown-toggle " type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> 
 
    Dropdown 
 
    <span class="caret"></span> 
 
    </button> 
 
    <ul class="dropdown-menu dropdown-info " data-dropdown-in="slideInRight" aria-labelledby="dropdownMenu1"> 
 
    <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><a href="#">Separated link</a></li> 
 
    </ul> 
 
</div> 
 

 
    
 

それ私はよりよい解決策