확장 된 답변은 내 첫 번째 답변이므로 이전에 충분한 세부 정보가 없었 으면 변명합니다.
Bootstrap 3.x의 경우 개인적으로 CSS 애니메이션을 선호하며 Bootstrap Dropdown Javascript Hooks와 함께 animate.css를 사용하고 있습니다. 그것은 매우 유연한 접근 방식을 추구하는 정확한 효과를 갖지 못할 수도 있습니다.
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 개의 사용자 지정 데이터 속성을 추가합니다. 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 hooks / events ( 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
도움이 되었기를 바랍니다.이 두 번째 글에는 Tom에 필요한 세부 정보 수준이 있습니다.