Отключение анимации Twitter-загрузки Bootstrap Navbar

Ответ 1

Bootstrap выполняет анимацию перехода отзывчивой навигационной панели так же, как и при любом свертывании, при котором используется переход CSS3. Чтобы отключить переход только для панели навигации (оставив любые другие переходы на месте), вам просто нужно переопределить CSS.

Я бы предложил добавить класс, такой как no-transition (но имя может быть произвольным) в ваш складной контейнер

<div class="nav-collapse no-transition">

и затем определение правила CSS, которое отключит переход CSS3, определенный Bootstrap (убедитесь, что ваше правило CSS анализируется после bootstrap.css):

.no-transition {
  -webkit-transition: height 0;
  -moz-transition: height 0;
  -ms-transition: height 0;
  -o-transition: height 0;
  transition: height 0;
}

Но не останавливайтесь на достигнутом! Bootstrap JavaScript жестко запрограммирован, чтобы предполагать, что переход будет иметь место, если переходы поддерживаются браузером. Если вы просто внесете изменения выше, вы обнаружите, что разборный объект "блокируется" после одного цикла открытия/закрытия, потому что он все еще ожидает срабатывания события завершения перехода браузера. Есть два неидеальных способа обойти это:

Первый вариант: взломайте bootstrap-collapse.js, чтобы не ждать события завершения перехода. Возиться с Bootstrap никогда не будет хорошей идеей, потому что это сделает будущие обновления болезненными для вас. Этот конкретный обходной путь также должен был бы применяться аналогичным образом к любому другому компоненту Bootstrap JavaScript, которому вы хотите передать класс no-transition.

bootstrap-collapse.js: 107

      this.$element.hasClass('no-transition') || (this.transitioning = 1);

Второй, рекомендуемый вариант: используйте сверхкороткое время перехода вместо отключения перехода. Это не совсем удаляет анимацию перехода, как вы просили, но она приводит к аналогичному результату, вероятно, без заметного негативного влияния на производительность ваших мобильных устройств с низким энергопотреблением. Достоинством этого метода является то, что вам не нужно взламывать файлы Bootstrap JS, и вы можете применить no-transition к любому элементу, а не просто к краху!

.no-transition {
  -webkit-transition: height 0.01s;
  -moz-transition: height 0.01s;
  -ms-transition: height 0.01s;
  -o-transition: height 0.01s;
  transition: height 0.01s;
}

Ответ 2

Bootstrap добавляет коллапсирующий класс во время анимации, поэтому его нужно перезаписать.

.navbar-collapse.collapsing {
  -webkit-transition: height 0.01s;
  -moz-transition: height 0.01s;
  -ms-transition: height 0.01s;
  -o-transition: height 0.01s;
  transition: height 0.01s;

}

Ответ 3

A простой, не-CSS-метод, чтобы отключить анимацию с помощью jQuery:

$.support.transition = false

Ответ 4

Добавьте его в пользовательский файл css сразу после вызова bootstrap.css

.collapsing {
  -webkit-transition: height 0.01s;
  -moz-transition: height 0.01s;
  -ms-transition: height 0.01s;
  -o-transition: height 0.01s;
  transition: height 0.01s;

}

Ответ 5

Конечно, переходящая высота даже в течение очень короткого периода по-прежнему вызывает краску, поэтому браузеру придется выполнять работу, которая, скорее всего, снизит частоту кадров до 30 или около того. Редактирование файлов начальной загрузки также не является идеальным из-за дополнительных осложнений обновления.

Если это еще что-то, что вы хотели бы сделать на своем сайте, хорошая новость заключается в том, что в текущей версии начальной загрузки больше нет переходов для navbar. http://getbootstrap.com/components/#navbar

Ответ 6

В этом коде ниже вы получите открытую по умолчанию навигационную панель. Трюк устанавливает высоту div с классом container и nav-collapse до auto. Если вы также хотите, чтобы кнопка с тремя окнами была полностью неактивной, удалите data-toggle="collapse" из приведенного ниже кода.

 <div class="navbar">
    <div class="navbar-inner">
    <div class="container" style="height:auto">

    <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
    <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">

    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    </a>

    <!-- Be sure to leave the brand out there if you want it shown -->
    <a class="brand" href="#">Project name</a>

    <!-- Everything you want hidden at 940px or less, place within here -->
    <div class="nav-collapse" style="height:auto">
    <!-- .nav, .navbar-search, .navbar-form, etc -->
<ul class="nav">
<li><a href="#">Link 1</a></li>   
 <li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
    </ul>
    </div>

    </div>
    </div>
    </div>