Отключить бутстрап Свернуть/закрыть анимацию

Ответ 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, этот артефакт не появляется.