Твиттер Bootstrap Collapse Direction-Horizontal вместо вертикальной

Ответ 1

Я понял, как сделать это очень легко без изменения или добавления javascript.

Сначала вы определяете следующий CSS после всего CSS-бутстрапа Twitter:

.collapse {
  height: auto;
  width: auto;
}

.collapse.height {
  position: relative;
  height: 0;
  overflow: hidden;
  -webkit-transition: height 0.35s ease;
  -moz-transition: height 0.35s ease;
  -o-transition: height 0.35s ease;
  transition: height 0.35s ease;
}

.collapse.width {
  position: relative;
  width: 0;
  overflow: hidden;
  -webkit-transition: width 0.35s ease;
  -moz-transition: width 0.35s ease;
  -o-transition: width 0.35s ease;
  transition: width 0.35s ease;
}

.collapse.in.width {
  width: auto;
}

.collapse.in.height {
  height: auto;
}

Далее, в целевом элементе (где вы определяете класс .collapse) вам нужно добавить класс .width или .height в зависимости от того, какое свойство вы хотите оживить.

Наконец, вы должны переносить содержимое целевого элемента и явно определять его ширину, если анимация ширины. Это не требуется при анимации высоты.

Здесь вы можете найти рабочий пример → http://jsfiddle.net/ud3323/ZBAHS/

Ответ 2

С bootstrap 3.0.0 вам просто нужно добавить класс width к целевому элементу, а затем следующий css, если вы хотите его оживить.

.collapse.width {
    height: auto;
    -webkit-transition: width 0.35s ease;
    -moz-transition: width 0.35s ease;
    -o-transition: width 0.35s ease;
    transition: width 0.35s ease;
}

Ответ 3

В моей версии bootstrap 3 (используя LESS) я просто должен был включить это в мой глобальный файл меньшего размера:

.collapsing.width  { 
    width: 0;
    height: auto;
    .transition(width 0.35s ease);
}

Дополнительный класс должен быть width, так как collapse.js ищет этот класс для перехода. Я пробовал все остальные предложения, но они не работали для меня.

Ответ 4

Обновлено 2018

Bootstrap 4.x

Переход по горизонтальному коллапсу в Bootstrap 4 в основном такой же, ожидаемый видимый класс теперь .show вместо .in. Это также может помочь указать display: block, так как многие элементы теперь отображают: flex.

.collapse.show {
  visibility: visible;
}

4.x демо
4.x Боковая демонстрация

Bootstrap 3.3.7 (оригинальный ответ)

Ни один из существующих ответов не работал для меня. Чтобы сделать анимацию свертывания горизонтальной в последних версиях, вам нужно установить как переход на ширину, так и использовать видимость.

.collapse {
  visibility: hidden;
}
.collapse.in {
  visibility: visible;
}
.collapsing {
  position: relative;
  height: 0;
  overflow: hidden;
  -webkit-transition-property: height, visibility;
  transition-property: height, visibility;
  -webkit-transition-duration: 0.35s;
  transition-duration: 0.35s;
  -webkit-transition-timing-function: ease;
  transition-timing-function: ease;
}
.collapsing.width {
  -webkit-transition-property: width, visibility;
  transition-property: width, visibility;
  width: 0;
  height: auto;
}

3.x демо

Ответ 5

Он не является вариантом для этого конкретного плагина. Похоже, вам может понадобиться изменить его или зацепиться за него, чтобы заставить его работать таким образом...

Посмотрев на JS файл, я заметил пару вещей. Во-первых, похоже, что он может использовать bootstrap-transition.js, который, по-видимому, использует переходы CSS3. Таким образом, можно было бы написать новый переход. Я не уверен на 100%, если это так, как работает.

Вариант 1

Мое предложение состояло бы в том, чтобы либо засунуть в файл плагина bootstrap-collapse.js какое-то время, и посмотреть, можете ли вы понять, как он работает.

В частности, я бы посмотрел на эту часть... bootstrap-carousel.js

this.$element[dimension](0)
this.transition('addClass', $.Event('show'), 'shown')
$.support.transition && this.$element[dimension](this.$element[0][scroll])

Похоже, что .transition - это обратный вызов из bootstrap-transition.js

Вариант второй

Моим вторым предложением было бы просто написать что-то свое.

Мой ответ

И, наконец, мой ответ заключается в том, что, глядя на документацию по начальной загрузке, она не является вариантом.

Дополнительная информация:

Этот веб-сайт, похоже, делает аналогичные вещи с переходами CSS3. http://ricostacruz.com/jquery.transit/

Ответ 6

Я думаю, что translateX (-100%) и translateX (0) может быть способом, а не анимировать ширину, так как использует аппаратное ускорение правильно, когда поддерживается

Ответ 7

Хорошие ответы здесь, но мне пришлось внести некоторые изменения для более чистого двустороннего перехода:

.collapse.width, .collapsing {
    height: 25px; /* depending on your element height */
    overflow: hidden;
    -webkit-transition: width 0.25s ease;
    -moz-transition: width 0.25s ease;
    -o-transition: width 0.25s ease;
    transition: width 0.25s ease;
}

Установка фиксированной высоты также помогла предотвратить "перескакивание" страницы, когда элемент был свернут и расширен.