отключить свернуть Bootstrap открыть / закрыть анимацию [дубликат]

этот вопрос уже есть ответ здесь:

  • Выключение анимации перехода Twitter Bootstrap Navbar 6 ответов

любой трюк, чтобы отключить открытую / закрытую анимацию свернуть группы ?

4 56
javascript animation twitter-bootstrap

4 ответа:

Для Bootstrap 3 и 4 это

.collapsing {
    -webkit-transition: none;
    transition: none;
    display: none;
}
101

Bootstrap 2 CSS решение:

.collapse {  transition: height 0.01s; }

NB: параметр transition: none отключает функцию свертывания.

Bootstrap 4 устранение:

.collapsing {
  transition: none !important;
}
21

Если вы найдете 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');
    });
);
17

может быть, не прямой ответ на вопрос, но недавнее дополнение к официальная документация описывает, как jQuery можно использовать для отключения переходов полностью просто:

$.support.transition = false

задание .collapsing CSS переходы в none как указано в принятой ответ удалены анимации. Но это - в Firefox и Chromium для меня-создает нежелательную визуальную проблему при коллапсе navbar.

для например, посетите Bootstrap пример navbar и добавить CSS из принятого ответа:

.collapsing {
     -webkit-transition: none;
     transition: none;
}

то, что я сейчас вижу, когда навигационная панель рушится, нижняя граница навигационной панели на мгновение становится двумя пикселями вместо одного, а затем смущенно возвращается к одному. С помощью jQuery, этот артефакт не появляется.

10