Я использую загрузчик, и я хотел бы добавить анимацию в раскрывающийся список. Я хочу добавить к нему анимацию, скользить вниз и назад при выходе из нее. Как я мог это сделать?
Вещи, которые я пытался:
Изменение выпадающего файла Js следующим образом:
Как сделать так, чтобы выпадающее меню Bootstrap плавно перемещалось вверх и вниз?
Если вы обновляетесь до Bootstrap 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;
}
Единственная проблема с этим способом состоит в том, что вы должны вручную указать максимальную высоту. Если вы установите очень большое значение, ваша анимация будет очень быстрой.
Это работает как шарм, если вы знаете приблизительную высоту выпадающих меню, в противном случае вы все равно можете использовать javascript, чтобы установить точное значение максимальной высоты.
Вот небольшой пример: ДЕМО
! В этом решении есть небольшая ошибка с отступом, проверьте комментарий 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 в событие slideUp и сбросить все активные классы и атрибуты. Идет примерно так:
Вот результат: пример Bootply
Javascript/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:''});
});
});
В щелчке это можно сделать, используя код ниже
$('.dropdown-toggle').click(function() {
$(this).next('.dropdown-menu').slideToggle(500);
});
Я использую код выше, но я изменил эффект задержки методом slideToggle.
Он уменьшает выпадающее меню при наведении анимации.
$('.navbar .dropdown').hover(function() {
$(this).find('.dropdown-menu').first().stop(true, true).slideToggle(400);
}, function() {
$(this).find('.dropdown-menu').first().stop(true, true).slideToggle(400)
});
Обновление Bootstrap 4 2018
В Boostrap 4 класс .open был заменен на .show. Я хотел реализовать это, используя только переходы CSS без необходимости дополнительного JS или jQuery...
.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 можно задать любое большое значение, достаточное для размещения раскрывающегося содержимого.
Расширенный ответ, был моим первым ответом, поэтому извините, если раньше не было достаточно деталей.
Для Bootstrap 3.x я лично предпочитаю анимацию CSS, и я использую animate.css и вместе с Bootstrap Dropdown Javascript Hooks. Хотя это может и не иметь точно такого эффекта, что вы после этого довольно гибкий подход.
Шаг 1: Добавьте 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: Затем добавьте два атрибута пользовательских данных в элемент меню dropdrop; data-drop-in для анимации и выпадающего списка данных для анимации out. Это могут быть любые эффекты animate.css, такие как fadeIn или fadeOut
<ul class="dropdown-menu" data-dropdown-in="fadeIn" data-dropdown-out="fadeOut">
......
</ul>
Шаг 4:. Затем добавьте следующий Javascript, чтобы прочитать атрибуты данных выпадающего меню/выхода и реагировать на крючки/события Bootstrap Javascript API (http://getbootstrap.com/javascript/#dropdowns-events):
var dropdownSelectors = $('.dropdown, .dropup');
// Custom function to read dropdown data
// =========================
function dropdownEffectData(target) {
// @todo - page level global?
var effectInDefault = null,
effectOutDefault = null;
var dropdown = $(target),
dropdownMenu = $('.dropdown-menu', target);
var parentUl = dropdown.parents('ul.nav');
// If parent is ul.nav allow global effect settings
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);
}
}
// Custom function to read when animation is over
// =========================
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);
// Custom callback option, used to remove open class in out effect
if(typeof callbackFunc == 'function'){
callbackFunc();
}
});
}
// 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');
});
}
},
});
Шаг 5 (необязательно): Если вы хотите ускорить или изменить анимацию, вы можете сделать это с помощью CSS, как показано ниже:
.dropdown-menu.animated {
/* Speed up animations */
-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
Надеюсь, что это полезно, и эта вторая запись имеет необходимый уровень детализации Том
$('.navbar .dropdown').hover(function() {
$(this).find('.dropdown-menu').first().stop(true, true).slideDown();
}, function() {
$(this).find('.dropdown-menu').first().stop(true, true).slideUp();
});
Этот код работает, если вы хотите раскрывать выпадающие списки при наведении указателя мыши.
Я просто изменил .slideToggle на .slideDown и .slideUp и удалил (400) timing
BOOTSTRAP 3 ССЫЛКА
Добавил, потому что меня все время ловит решение в этой теме, и оно каждый раз меня заполняет.
По сути, раскрывающийся список BS немедленно удаляет класс .open из родительского, поэтому скольжение вверх не работает.
Используйте тот же бит, что и другие решения для slideDown();
// ADD SLIDEUP ANIMATION TO DROPDOWN //
$('.dropdown').on('hide.bs.dropdown', function(e){
e.preventDefault();
$(this).find('.dropdown-menu').first().stop(true, true).slideUp(300, function(){
$(this).parent().removeClass('open');
});
});
Вот хорошее простое решение, использующее jQuery, которое прекрасно работает:
$('.dropdown-toggle').click(function () {
$(this).next('.dropdown-menu').slideToggle(300);
});
$('.dropdown-toggle').focusout(function () {
$(this).next('.dropdown-menu').slideUp(300);
})
Переключение слайд-анимации происходит при нажатии и всегда ускоряется при проигрывании фокуса.
Измените значение 300 на все, что хотите, тем меньше число, чем быстрее анимация.
Edit:
Это решение будет работать только для рабочего стола. Для того, чтобы хорошо отображать мобильные устройства, потребуется дополнительная модификация.
В Bootstrap 3 этот вариант ответов выше делает slideUp() mobile slideUp() более плавной; Ответы выше содержат прерывистую анимацию, поскольку Bootstrap .open удаляет класс .open из родительского .open -переключателя, поэтому этот код восстанавливает класс до тех пор, пока не slideUp() анимация slideUp().
// Add animations to topnav dropdowns
// based on https://stackoverflow.com/a/19339162
// and https://stackoverflow.com/a/52231970
$('.dropdown')
.on('show.bs.dropdown', function() {
$(this).find('.dropdown-menu').first().stop(true, true).slideDown(300);
})
.on('hide.bs.dropdown', function() {
$(this).find('.dropdown-menu').first().stop(true, false).slideUp(300, function() {
$(this).parent().removeClass('open');
});
})
.on('hidden.bs.dropdown', function() {
$(this).addClass('open');
});
Ключевые отличия:
hide.bs.dropdown события hide.bs.dropdown я использую .stop() умолчанию .stop() (false) для второго аргумента (jumpToEnd)hidden.bs.dropdown события hidden.bs.dropdown восстанавливает класс .open для родительского .open -переключателя выпадающего .open и делает это практически сразу после того, как класс был впервые удален. Тем временем slideUp() все еще работает, и, как и в ответах выше, ее обратный вызов "анимация завершена" отвечает за окончательное удаление класса .open из его родителя.