Twitter Bootstrap 100% Höhe Akkordeon "springen"

Ich versuche, ein 100% Höhe Akkordeon mit dem Twitter Bootstrap Kollaps-Komponente zu implementieren, genau wie in diesem question beschrieben.Twitter Bootstrap 100% Höhe Akkordeon "springen"

Ich manuell die Höhen der .accordion-inner Elemente wie in dieser answer beschrieben.

Allerdings habe ich erlebt "bouncy" Verhalten beim Erweitern/Zusammenklappen der Panels. Ich habe alle Polsterung/Rand/Rand von den .accordion-inner Elementen entfernt, um diese Möglichkeit zu beseitigen.

Es ist am deutlichsten in IE10, aber das Problem ist auch in Chrome offensichtlich.

Siehe hierzu example.

Irgendwelche Ideen, was dieses "jumpy" Verhalten verursacht?

Quelle

2013-05-20 Brett Postin

Es funktioniert gut mit Chrom – Xavier

Ich habe in Chrom eingecheckt und die "Bounce" auf der Unterseite existiert noch. –

Ja, du hast Recht, habe es nicht bemerkt .. Aber schlechte Nachrichten gibt es auch ein "Bounce" in der Boostrap-Dokumentation: schau es dir an http://twitter.github.io/bootstrap/javascript.html # collapse – Xavier

spät zur Party, aber:

Ich hatte ein ähnliches Problem, und bemerkte, dass, wenn ich ein Rand oben aus dem Element unter dem kollabierenden entfernt und ersetzt durch padding-top, der Übergang glatt war.

So - überprüfen Sie die Ränder benachbarter Elemente und versuchen Sie, sie wenn möglich durch Auffüllen zu ersetzen.

Quelle

2014-07-31 23:02:17 TheHud

Für mich war es ähnlich, aber es war der Rand um das .collapse div. Ich hatte ein Div mit zwei Klassen: '.content' und' .collapse'. '.content' hatte Margen. Ich habe die zwei Klassen in zwei getrennte divs getrennt, wobei '.collapse'' 'content' 'eingepackt hat – MeltingDog

Ich denke, der "Sprung", den Sie sehen, liegt an den CSS-Übergängen für die .collapse-Klasse.

Wenn Sie sich diesen SO-Thread Turning off Twitter Bootstrap Navbar Transition animation ansehen, können Sie sehen, wie Sie den Übergang mit einer überschreibenden CSS-Klasse 'no-transition' deaktivieren können. Dies verhindert nicht die Animation alle zusammen, aber es beschleunigt sie so, dass der Sprung weniger auffällig ist ...

hinzufügen no-transition zu Ihrem Akkordeon-Körperelemente ..

<div id="collapseOne" class="accordion-body collapse in no-transition">

die CSS hinzufügen. .

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

Aktualisiert Plunker .. http://plnkr.co/edit/xnvDGcDd21iCu69wKSub?p=preview

Quelle

2013-05-20 11:19:42 ZimSystem

Danke, aber im Idealfall möchte ich die Animation behalten (die ich nicht mehr sehe). Sagst du, dass du das nicht für möglich hältst? –

Sie könnten versuchen, die Animation zu verlangsamen, indem Sie die 's' auf den Übergängen erhöhen, aber die beiden Übergänge verursachen den" Sprung " – ZimSystem

HTML:

<td><a data-toggle="collapse" href="#text1" aria-expanded="false" aria-controls="#text1"</a> 
<div class="collapse" id="text1" aria-expanded="true" style="padding-top:5px"><img src="..."></div>

CSS:

.collapse.in{ 
    padding-bottom:5px; 
}

Quelle

2015-05-02 18:33:35 Fabio

Ich war dieses seltsame Verhalten, wo das Akkordeon zu einer viel größeren Höhe erweitern würde als der tatsächliche sichtbare Inhalt, und dann kollabiert (Sprung) zurück zur tatsächlichen sichtbaren Inhaltshöhe.

Es stellte sich heraus, dass mein Akkordeon Körper für diese Platte ein paar leere html Elemente hatte, die in meinem Fall in ihnen ein paar divs mit col-sm-4 Klasse und nichts waren. Sobald ich sie auskommentiert hatte, hörte dieses Sprungverhalten auf. Hoffe das hilft jemandem mit ähnlichen Problemen.

Quelle

2016-05-23 14:53:41

Twitter Bootstrap 100% Höhe Akkordeon "springen"

Antwort

Verwandte Themen