拡張された答えは、私の最初の答えだったので、以前に十分な詳細がなかった場合は言い訳になります。
Bootstrap 3.xの場合、私は個人的にCSSアニメーションを好み、animate.cssとBootstrapドロップダウンJavascriptフックを使用しています。かなり柔軟なアプローチを採用した後は、正確な効果が得られない可能性があります。
ステップ1： headタグを使用してanimate.cssをページに追加します。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.4.0/animate.min.css">
ステップ2：トリガーで標準のブートストラップHTMLを使用します。
<div class="dropdown">
<button type="button" data-toggle="dropdown">Dropdown trigger</button>
<ul class="dropdown-menu">
...
</ul>
</div>
ステップ3：次に、2つのカスタムデータ属性をdropdrop-menu要素に追加します。inアニメーションの場合はdata-dropdown-in、outアニメーションの場合はdata-dropdown-out。これらは、fadeInやfadeOutなどのanimate.cssエフェクトにすることができます。
<ul class="dropdown-menu" data-dropdown-in="fadeIn" data-dropdown-out="fadeOut">
......
</ul>
ステップ4：次に、次のJavascriptを追加して、data-dropdown-in / outデータ属性を読み取り、Bootstrap Javascript APIフック/イベント（http://getbootstrap.com/javascript/#dropdowns-events）に反応します。
var dropdownSelectors = $('.dropdown, .dropup');
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,
};
}
function dropdownEffectStart(data, effectToStart) {
if (effectToStart) {
data.dropdown.addClass('dropdown-animating');
data.dropdownMenu.addClass('animated');
data.dropdownMenu.addClass(effectToStart);
}
}
function dropdownEffectEnd(data, callbackFunc) {
var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
data.dropdown.one(animationEnd, function() {
data.dropdown.removeClass('dropdown-animating');
data.dropdownMenu.removeClass('animated');
data.dropdownMenu.removeClass(data.effectIn);
data.dropdownMenu.removeClass(data.effectOut);
if(typeof callbackFunc == 'function'){
callbackFunc();
}
});
}
dropdownSelectors.on({
"show.bs.dropdown": function () {
var dropdown = dropdownEffectData(this);
dropdownEffectStart(dropdown, dropdown.effectIn);
},
"shown.bs.dropdown": function () {
var dropdown = dropdownEffectData(this);
if (dropdown.effectIn && dropdown.effectOut) {
dropdownEffectEnd(dropdown, function() {});
}
},
"hide.bs.dropdown": function(e) {
var dropdown = dropdownEffectData(this);
if (dropdown.effectOut) {
e.preventDefault();
dropdownEffectStart(dropdown, dropdown.effectOut);
dropdownEffectEnd(dropdown, function() {
dropdown.dropdown.removeClass('open');
});
}
},
});
ステップ5（オプション）：アニメーションを高速化または変更する場合は、次のようにCSSを使用して行うことができます。
.dropdown-menu.animated {
-webkit-animation-duration: 0.55s;
animation-duration: 0.55s;
-webkit-animation-timing-function: ease;
animation-timing-function: ease;
}
興味のある人がいれば、より詳細な記事を書き、ダウンロードしてください：記事：http：//bootbites.com/tutorials/bootstrap-dropdown-effects-animatecss
それがお役に立てば幸いです。この2回目の記事には、トムに必要な詳細レベルが含まれています。