Twitter Bootstrap Collapse-plugin-Richtung—Horizontale statt Vertikale

Gibt es eine Möglichkeit zu reduzieren, die Bootstrap Collapse-plugin von horizontal statt vertikal? Blick auf den code, der diese Fähigkeit scheint nicht gebaut werden, aber ich hoffe, ich bin nur etwas fehlt...

Jede Hilfe wird sehr geschätzt. Danke!

InformationsquelleAutor Roy Daniels | 2012-09-19

22

Ich herausgefunden, wie dies zu tun ist sehr einfach, ohne änderung oder hinzufügen von javascript.

Zuerst definieren Sie die folgenden CSS-nachdem alle Twitter Bootstrap-CSS:
```
.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;
}
```
Nächsten, auf das gewünschte element (hier definieren Sie die .collapse Klasse) müssen Sie die Klasse .width oder .height je nachdem, welche Eigenschaft aus, die Sie animieren möchten.

Schließlich, Sie muss wrap-der Inhalt der Ziel-element und explizit definieren, dessen Breite, wenn das animieren der Breite. Dies ist nicht erforderlich, wenn die Animation der Höhe.

Finden Sie ein funktionierendes Beispiel hier -> http://jsfiddle.net/ud3323/ZBAHS/

Beispiel nicht mehr funktioniert.
Siehe stackoverflow.com/questions/19843732/... und jsfiddle.net/zu5ftdjx für eine funktionierende Beispiel
Aktualisiert arbeiten Bootply für 3.3.7 => bootply.com/vwS8HxEeVB
Dies hat nicht funktioniert in der neuesten 3.x oder 4.x -- siehe mein update hier: stackoverflow.com/a/44070096/171456

InformationsquelleAutor Roy Daniels
21

Mit bootstrap 3.0.0, Sie brauchen nur zu addieren Sie die Breite der Klasse, um das gewünschte element auszuwählen, und dann die folgenden css-wenn Sie möchten, es zu animieren.
```
.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;
}
```
Vielen Dank - hatte ich ursprünglich verwendet, Roy Daniels die version oben und war auf der Suche, um zu sehen, ob es einen einfacheren Weg, es zu tun in 3.0 nun haben wir aufgerüstet.
Dies scheint nicht für mich arbeiten. Ich bin mit der flachen Oberfläche auf der Oberseite des bootstrap.
Ist es ein jsfiddle?

InformationsquelleAutor flipside
6

In meiner version von bootstrap 3 (WENIGER), da musste ich einfach mit in mein global weniger Datei:
```
.collapsing.width  { 
    width: 0;
    height: auto;
    .transition(width 0.35s ease);
}
```
Der extra-Klasse hat zu width da die collapse.js sieht für diese Klasse für den übergang. Ich habe versucht, alle anderen Vorschläge, aber Sie funktionierte nicht für mich.

Dieser arbeitete für mich, aber da mein kleiner die Datei wird nicht erstellt mit bootstrap, die ich hatte, um zu definieren, die .transition mixin, bevor Sie es verwenden: .transition (@transition) { -webkit-transition: @transition; -moz-transition: @transition; -ms-transition: @transition; -o-transition: @transition; }

InformationsquelleAutor J_A_X
5

Aktualisiert 2019

Bootstrap 4.x

Bootstrap-4 horizontale Zusammenbruch transtion ist im Grunde das gleiche, erwartet die sichtbare Klasse ist jetzt .show statt .in. Es kann auch helfen, um anzugeben, display:block, da sind viele Elemente zeigen nun: flex.
```
.collapse.show {
  visibility: visible;
}
```
4.x demo

4.x-sidebar demo

Siehe auch:

Bootstrap horizontale Menü einklappen, um oberen Bereich

Bootstrap -, Wie slide-nav-Leiste von Links statt von oben

Bootstrap 3.3.7 (original-Antwort)

Keine der bestehenden Antworten, die für mich gearbeitet. Um den Zusammenbruch animation horizontal in den neuesten Versionen, die Sie benötigen, um sowohl den übergang zu der Breite und auch nutzen Sichtbarkeit.
```
.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 demo

Wie machen es die horizontale Akkordeon-wie in der vertikalen und öffnung ein zu einer Zeit?
Ich habe etwas arbeiten basierend auf diesem Beispiel, aber wenn das element collapsing horizontal, sehe ich den Zeilenumbruch. Ich sehe nichts, das verhindert, dass es in diesen Beispielen, was bin ich?

InformationsquelleAutor Zim
4

Er nicht erscheinen, um eine option für das jeweilige plugin. Wie es aussieht, müssen Sie möglicherweise um es zu ändern, oder Haken in die es irgendwie zum laufen bekommen...

Nach einem Blick auf die JS-Datei ein bisschen, bemerkte ich ein paar Dinge. Erste Sache ist, dass es aussieht wie es sein könnte mit bootstrap-transition.js ,die, wie es scheint mit CSS3 transitions. So könnte es möglich sein, schreiben Sie eine neue transition sind. Ich bin mir nicht 100% sicher, ob das ist, wie es ist, funktioniert aber.

Option Einer

Mein Vorschlag wäre, entweder stöbern in den bootstrap-collapse.js plugin-Datei für eine Weile und sehen, wenn Sie herausfinden können, wie es funktioniert.

In allem würde ich schauen, das Teil... bootstrap-carousel.js
```
this.$element[dimension](0)
this.transition('addClass', $.Event('show'), 'shown')
$.support.transition && this.$element[dimension](this.$element[0][scroll])
```
Sieht es aus wie .transition ist ein Rückruf von bootstrap-transition.js

Option Zwei

Mein zweiter Vorschlag wäre, nur schreiben Sie etwas von Ihren eigenen.

Meine Antwort

Und schließlich meine Antwort ist, dass aus der Betrachtung der bootstrap-Dokumentation es erscheint nicht eine option sein.

Einige zusätzliche Infos:

Dieser website zu sein scheint, macht ähnliche Sachen mit CSS3-übergängen.
http://ricostacruz.com/jquery.transit/

Das ist entlang der Linien von, was dachte ich auch. Es wäre schön, das zu nutzen, was bereits in der Bootstrap, also ich denke, ich werde versuchen, meinen eigenen übergang nutzen bootstrap-transition.js. Vielen Dank für deinen input. Ich Schätze es wirklich!
Kein problem.. viel Glück mit deiner Codierung!

InformationsquelleAutor Kris Hollenbeck
0

ich denke translateX(-100%) und translateX(0) könnte der Weg zu gehen, anstatt zu animieren, Breite nutzt die hardware-Beschleunigung richtig unterstützt

InformationsquelleAutor Adam Spence

Gute Antworten hier, aber ich musste einige änderungen vornehmen, die eine saubere, zwei-Wege-transition:

.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;
}

Einstellung eine Feste Höhe auch geholfen verhindern Seite "springen", wie das element ein-und ausgeblendet.

InformationsquelleAutor Ixalmida

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.