Любой трюк, чтобы отключить анимацию открытия/закрытия групп Collapse?
Отключить бутстрап Свернуть/закрыть анимацию
Ответ 1
Для Bootstrap 3 и 4 это
.collapsing {
-webkit-transition: none;
transition: none;
display: none;
}
Ответ 2
Bootstrap 2
CSS решение:
.collapse { transition: height 0.01s; }
NB: настройка transition: none
отключает функцию свертывания.
Bootstrap 4
решение:
.collapsing {
transition: none !important;
}
Ответ 3
Если вы находите скачок 1px перед расширением и после свертывания при использовании решения CSS немного раздражающим, вот простое решение JavaScript для Bootstrap 3...
Просто добавьте это где-нибудь в своем коде:
$(document).ready(
$('.collapse').on('show.bs.collapse hide.bs.collapse', function(e) {
e.preventDefault();
}),
$('[data-toggle="collapse"]').on('click', function(e) {
e.preventDefault();
$($(this).data('target')).toggleClass('in');
})
);
Ответ 4
Возможно, не прямой ответ на вопрос, но недавнее дополнение к официальной документации описывает, как jQuery можно использовать для отключения переходов полностью просто:
$.support.transition = false
Настройка перехода .collapsing
CSS к none как указано в принятом ответе, удалила анимацию. Но это - в Firefox и Chromium для меня - создает нежелательную визуальную проблему при крахе навигатора.
Например, посетите пример загрузки navbar и добавьте CSS из принятого ответа:
.collapsing {
-webkit-transition: none;
transition: none;
}
То, что я вижу в данный момент, - это когда навигационная панель разрушается, нижняя граница navbar мгновенно становится двумя пикселями вместо одной, а затем сбивает с толку назад. Используя jQuery, этот артефакт не появляется.