扩展答案，这是我的第一个答案，如果以前没有足够的详细信息，那么请原谅。
对于Bootstrap 3.x，我个人更喜欢CSS动画，并且我一直在使用animate.css＆和Bootstrap Dropdown Javascript Hooks。尽管它可能并不完全具有您想要的效果，但是它是一种非常灵活的方法。
第1步：使用head标签将animate.css添加到您的页面：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.4.0/animate.min.css">
步骤2：在触发器上使用标准的Bootstrap HTML：
<div class="dropdown">
<button type="button" data-toggle="dropdown">Dropdown trigger</button>
<ul class="dropdown-menu">
...
</ul>
</div>
步骤3：然后向dropdrop-menu元素添加2个自定义数据属性；输入动画的数据下拉输入和输出动画的数据下拉输出。这些可以是任何animate.css效果，例如fadeIn或fadeOut
<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
希望对您有所帮助，并且第二篇文章中有汤姆所需要的详细程度