отключить анимацию открывания / закрывания Bootstrap's Collapse [дубликаты]

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

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

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

Ответы на вопрос(4)

Решение Вопроса

Для начальной загрузки3 а также4 его

.collapsing {
    -webkit-transition: none;
    transition: none;
    display: none;
}
 teewuane26 мар. 2014 г., 18:08
Могу подтвердить, что это работает для начальной загрузки 3. Я закончил тем, что отключил переход, поскольку это довольно медленно на мобильных устройствах. Не уверен почему.
 vog06 июл. 2017 г., 10:09
я добавилdisplay: none чтобы избежать последнего разрушающегося артефакта.
 Sam Axe09 мая 2018 г., 21:51
в то время как это отключает анимацию, согласно запросу OP, оно сохраняет задержку открытия. Можно ли уменьшить эту задержку до 0?
 Cristina Cristea12 мая 2015 г., 09:57
на мобильном телефоне все еще есть небольшая задержка из-за этой строки из bootstrap.js: «Collapse.TRANSITION_DURATION = 350» изменяет значение продолжительности перехода, и задержка будет фиксированной.
 Kapitein Witbaard09 окт. 2015 г., 13:29
А как насчет -moz-transition и -o-transition?
Bootstrap 2 CSS решение:
.collapse {  transition: height 0.01s; }  

NB: настройкаtransition: none отключает функцию коллапса

Bootstrap 4 решение:
.
 Max04 сент. 2013 г., 21:23
работает отлично, спасибо!

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');
    });
);
 Amit Saxena14 сент. 2016 г., 07:56
Отличное решение! Это приводит к абсолютно плавному переходу. Нет мерцания на всех.
 itayw02 сент. 2014 г., 14:52
Для меня проблема была не только с самим переходом CSS, но и с javascript, который изменяет высоту. На мобильных устройствах не хватало общего опыта, и использование вышеуказанного кода JS решило эту проблему для меня.
 Reft14 февр. 2015 г., 17:03
Это также решает мою проблему, но предотвращает закрытие панели навигации, если вы щелкаете снаружи (для этого у меня есть событие щелчка).
 Johann Combrink17 мар. 2017 г., 15:42
Лучшее решение Все же, CSS не работал в моем случае.

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

$.support.transition = false

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

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

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

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

 Jukka Suomela16 нояб. 2015 г., 20:46
гладкий$.support.transition = false после загрузкиbootstrap.min.js было недостаточно, но$(function() { $.support.transition = false; }) сделал трюк для меня.
 eddiegroves11 сент. 2015 г., 07:18
Единственным недостатком является то, что это отключило бы глобальные переходы, что может быть нежелательно.

Ваш ответ на вопрос