bootstrap을 사용 하고 있으며 드롭 다운에 애니메이션을 추가하고 싶습니다. 나는 그것에 애니메이션을 추가하고 그것을 떠날 때 아래로 슬라이드했다가 뒤로하고 싶습니다. 어떻게 할 수 있습니까?
내가 시도한 것 :
다음과 같이 Js 드롭 다운 파일을 변경합니다.
답변
부트 스트랩 3 (BS3)으로 업데이트하면 원하는 기능을 연결하는 데 유용한 많은 Javascript 이벤트가 노출되었습니다. BS3에서이 코드는 모든 드롭 다운 메뉴에 원하는 애니메이션 효과를 제공합니다.
// Add slideDown animation to Bootstrap dropdown when expanding.
$('.dropdown').on('show.bs.dropdown', function() {
$(this).find('.dropdown-menu').first().stop(true, true).slideDown();
});
// Add slideUp animation to Bootstrap dropdown when collapsing.
$('.dropdown').on('hide.bs.dropdown', function() {
$(this).find('.dropdown-menu').first().stop(true, true).slideUp();
});
당신은 BS3 이벤트에 대해 읽을 수 있습니다 여기에 드롭 다운 이벤트에 대한 특히 여기 .
답변
또한이 작은 코드를 스타일에 추가하여 드롭 다운 효과에 JavaScript를 사용하지 않고 CSS3 전환을 사용할 수도 있습니다.
.dropdown .dropdown-menu {
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
max-height: 0;
display: block;
overflow: hidden;
opacity: 0;
}
.dropdown.open .dropdown-menu { /* For Bootstrap 4, use .dropdown.show instead of .dropdown.open */
max-height: 300px;
opacity: 1;
}
이 방법의 유일한 문제는 max-height를 수동으로 지정해야한다는 것입니다. 매우 큰 값을 설정하면 애니메이션이 매우 빨라집니다.
드롭 다운의 대략적인 높이를 알고 있으면 매력처럼 작동합니다. 그렇지 않으면 자바 스크립트를 사용하여 정확한 최대 높이 값을 설정할 수 있습니다.
다음은 작은 예입니다. DEMO
! 이 솔루션에는 패딩에 작은 버그가 있습니다. Jacob Stamm의 주석을 솔루션으로 확인하십시오.
답변
나는 그런 일을하고 있지만 클릭 대신에 호버를했을 때 .. 이것은 내가 사용하고있는 코드입니다. 클릭시 작동하도록 약간 조정할 수 있습니다.
$('.navbar .dropdown').hover(function() {
$(this).find('.dropdown-menu').first().stop(true, true).delay(250).slideDown();
}, function() {
$(this).find('.dropdown-menu').first().stop(true, true).delay(100).slideUp()
});
답변
이 스레드를 범프 할 수 있는지 모르겠지만 열린 클래스가 너무 빨리 제거 될 때 발생하는 시각적 버그에 대한 빠른 수정을 알아 냈습니다. 기본적으로 슬라이드 업 이벤트 내부에 OnComplete 함수를 추가하고 모든 활성 클래스와 속성을 재설정하기 만하면됩니다. 다음과 같이 진행됩니다.
결과는 다음과 같습니다. Bootply 예제
자바 스크립트 / Jquery :
$(function(){
// ADD SLIDEDOWN ANIMATION TO DROPDOWN //
$('.dropdown').on('show.bs.dropdown', function(e){
$(this).find('.dropdown-menu').first().stop(true, true).slideDown();
});
// ADD SLIDEUP ANIMATION TO DROPDOWN //
$('.dropdown').on('hide.bs.dropdown', function(e){
e.preventDefault();
$(this).find('.dropdown-menu').first().stop(true, true).slideUp(400, function(){
//On Complete, we reset all active dropdown classes and attributes
//This fixes the visual bug associated with the open class being removed too fast
$('.dropdown').removeClass('show');
$('.dropdown-menu').removeClass('show');
$('.dropdown').find('.dropdown-toggle').attr('aria-expanded','false');
});
});
});
답변
슬라이드 및 페이드 효과에 대한 솔루션은 다음과 같습니다.
// Add slideup & fadein animation to dropdown
$('.dropdown').on('show.bs.dropdown', function(e){
var $dropdown = $(this).find('.dropdown-menu');
var orig_margin_top = parseInt($dropdown.css('margin-top'));
$dropdown.css({'margin-top': (orig_margin_top + 10) + 'px', opacity: 0}).animate({'margin-top': orig_margin_top + 'px', opacity: 1}, 300, function(){
$(this).css({'margin-top':''});
});
});
// Add slidedown & fadeout animation to dropdown
$('.dropdown').on('hide.bs.dropdown', function(e){
var $dropdown = $(this).find('.dropdown-menu');
var orig_margin_top = parseInt($dropdown.css('margin-top'));
$dropdown.css({'margin-top': orig_margin_top + 'px', opacity: 1, display: 'block'}).animate({'margin-top': (orig_margin_top + 10) + 'px', opacity: 0}, 300, function(){
$(this).css({'margin-top':'', display:''});
});
});
답변
2018 부트 스트랩 4 업데이트
Boostrap 4에서는 .open클래스가 .show. 추가 JS 또는 jQuery없이 CSS 전환 만 사용하여이를 구현하고 싶었습니다.
.show > .dropdown-menu {
max-height: 900px;
visibility: visible;
}
.dropdown-menu {
display: block;
max-height: 0;
visibility: hidden;
transition: all 0.5s ease-in-out;
overflow: hidden;
}
데모 : https://www.codeply.com/go/3i8LzYVfMF
노트 : max-height 드롭 다운 콘텐츠를 수용하기에 충분한 큰 값으로 설정할 수 있습니다.
답변
클릭하면 아래 코드를 사용하여 수행 할 수 있습니다.
$('.dropdown-toggle').click(function() {
$(this).next('.dropdown-menu').slideToggle(500);
});
