Bootstrap-Kollapsanimation nicht reibungslos

78 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="form-group">
    <a for="collapseOne" data-toggle="collapse" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne" class="btn btn-primary">+ addInfo </a>
    <textarea class="form-control collapse" id="collapseOne" rows="4"></textarea>
</div>

<div class="form-group">
    <a for="collapseTwo" data-toggle="collapse" href="#collapseTwo" aria-expanded="true" aria-controls="collapseOne" class="btn btn-info">+ subtitle </a>
    <input type="text" class="form-control collapse" id="collapseTwo">
</div>
Erweitern Sie das Snippet

Das Problem ist, wenn Sie auf die addInfoRegisterkarte klicken , können Sie einen Sprung beim Erweitern der finden text_area, nämlich die Animation ist nicht glatt.

jquery  twitter-bootstrap  twitter-bootstrap-3 
— Shapeare
quelle
Dies ist der Fall, aber sobald die Mindestgröße von 1 Zeile erreicht ist, wird das Element vom Bildschirm entfernt.
— Dean Meehan
2
Bootstrap Alpha 4 Antwort hier: Sie brauchen das <div class="clearfix">, um Ihr Navi zu verpacken, sonst wird es ruckelig.
— Suzumakes
1
@suzumakes das div mit clearfix sollte welches nav umschließen? Ich sehe kein Navi auf seinem Code!
— Gota
In meinem Fall war das Align-Items: Center, das auf den Wrapper Div angewendet wurde, die Ursache für das Ruckeln
— Jmainol

Antworten:

140

Falls jemand anderes auf dieses Problem stößt, wie ich es gerade getan habe, besteht die Antwort darin, den Inhalt, den Sie reduzieren möchten, in ein divWrapper-Div zu packen und nicht den Inhalt selbst.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="form-group">
    <a for="collapseOne" data-toggle="collapse" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne" class="btn btn-primary">+ addInfo</a>
    <div id="collapseOne" class="collapse">
        <textarea class="form-control" rows="4"></textarea>
    </div>
</div>

<div class="form-group">
    <a for="collapseTwo" data-toggle="collapse" href="#collapseTwo" aria-expanded="true" aria-controls="collapseOne" class="btn btn-info">+ subtitle</a>
    <input type="text" class="form-control collapse" id="collapseTwo">
</div>
Erweitern Sie das Snippet

— Philip Stratford
quelle
Perfekte Lösung! Vielen Dank!
— Ole Henrik Skogstrøm
Das Einwickeln von allem, was zusammengebrochen ist, divhat es auch für meinen Tisch getan!
— Membersound
Vielen Dank ! Das Update funktioniert jedoch. Gibt es eine Möglichkeit, es in einer Tabelle mit einem 'tr' zu verwenden, ohne den gesamten Inhalt in ein div einschließen zu müssen?
— Hassan ALAMI
Ich habe es noch nie versucht, aber die Antwort hier ( stackoverflow.com/a/30081737/1483190 ) legt nahe, dass divmöglicherweise für jede Zeile ein Wrapper erforderlich ist. Sie können jedoch die Wrap-Funktion von jQuery ( api.jquery.com/wrap ) verwenden, um jedes <tr>beim Laden<div> der Seite automatisch in eine mit der entsprechenden Klasse zu verpacken .
— Philip Stratford
Auch das Problem der Konflikte zwischen "d-lg-Block" und "Zusammenbruch" behoben
— Timar Ivo Batis
84

Ruckeln tritt auf, wenn das übergeordnete Div ".collapse" aufgefüllt ist.

Das Auffüllen erfolgt auf das Kind div, nicht auf das Elternteil. jQuery animiert die Höhe, nicht die Polsterung.

Beispiel: 

  <div class="form-group">
       <a for="collapseOne" data-toggle="collapse" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">+ addInfo</a>
       <div class="collapse" id="collapseOne" style="padding: 0;">
          <textarea class="form-control" rows="4" style="padding: 20px;"></textarea>
       </div>
  </div>

  <div class="form-group">
    <a for="collapseTwo" data-toggle="collapse" href="#collapseTwo" aria-expanded="true" aria-controls="collapseOne">+ subtitle</a>
    <input type="text" class="form-control collapse" id="collapseTwo">
  </div>

Geige zeigt beides

Hoffe das hilft.

— CR Rollyson
quelle
3
Eine großartige Antwort, die funktioniert, und eine Geige zum Booten, die deutlich zeigt, wie die Lösung funktioniert. Ein großes Lob an das Poster!
— Andy Lorenz
2
Das habe ich gesucht. Vielen Dank für die Erklärung der Rolle der Abfrage.
— Rachel S
Ich bin froh, dass es geholfen hat √√ @RachelS
— CR Rollyson
2
Oder in meinem Fall war es Höhe. Die Lektion hier ist, kein Styling zum Kollabieren durchzuführen, sondern stattdessen den Inhalt zu verpacken.
— Žilvinas
Dies sollte im Dokument erwähnt werden.
— Dexter
5

Hinzufügen zu @CR Rollyson Antwort,

Wenn Sie ein zusammenklappbares Div haben, das ein Attribut für die Mindesthöhe hat, führt dies ebenfalls zu einem Ruckeln. Versuchen Sie, dieses Attribut aus dem direkt reduzierbaren div zu entfernen. Verwenden Sie es im untergeordneten Div des zusammenklappbaren Div.

<div class="form-group">
    <a for="collapseOne" data-toggle="collapse" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">+ Not Jerky</a>
    <div class="collapse" id="collapseOne" style="padding: 0;">
        <textarea class="form-control" rows="4" style="padding: 20px;">No padding on animated element. Padding on child.</textarea>
    </div>
</div>

Geige

— Yogesh Kumar Gupta
quelle
Ja, wenn die Mindesthöhe aus irgendeinem Grund eingestellt werden muss, sollte sie im Textbereich angezeigt werden. Ihre Geigenversion wurde
— CR Rollyson
4

Ich denke, es kann verschiedene Situationen geben, die das Ruckeln verursachen. In meinem Beispiel befasst sich das Problem mit dem unteren Rand des nicht animierten Kindes (obwohl das animierte Elternteil keinen Rand / Abstand hat). Wenn Sie den Rand entfernen, wird die Animation glatt.

<div class="form-group">
    <a for="collapseJerky" data-toggle="collapse" href="#collapseJerky" aria-expanded="true" aria-controls="collapseJerky">+ Jerky</a>
    <div class="collapse" id="collapseJerky" style="margin:0; padding: 0;">
        <textarea class="form-control" rows="4" style="margin-bottom: 20px;">No margin or padding on animated element. Margin on child.</textarea>
    </div>
</div>
<div class="form-group">
    <a data-toggle="collapse" href="#collapseNotJerky" aria-expanded="true" aria-controls="collapseNotJerky">+ Not Jerky</a>
    <div class="collapse" id="collapseNotJerky" style="margin:0 padding: 0;">
        <textarea class="form-control" rows="4" style="margin-bottom: 0;">No margin or padding on animated element or on child.</textarea>
    </div>
</div>
<p>
    Moles and trolls, moles and trolls, work, work, work, work, work. We never see the light of day. This is just content below the "Not Jerky" to show that the animation is smooth.
</p>

Geige

— joeshmoe301
quelle
4

Obwohl dies die Antwort https://stackoverflow.com/a/28375912/5413283 war und in Bezug auf das Auffüllen nicht in der ursprünglichen Antwort erwähnt wird, sondern hier https://stackoverflow.com/a/33697157/5413283 .
Ich füge hier nur für visuelle Präsentation und einen saubereren Code hinzu.

Getestet auf Bootstrap 4 ✓

Erstellen Sie ein neues übergeordnetes Div und fügen Sie den Bootstrap-Zusammenbruch hinzu. Entfernen Sie die Klassen aus demtextarea

<div class="collapse" id="collapseOne"> <!-- bootstrap class on parent -->
    <textarea class="form-control" rows="4"></textarea>
</div> <!-- // bootstrap class on parent -->

Wenn Sie Leerzeichen haben möchten, wickeln Sie sie textareamit Polsterung ein . Nicht hinzufügen margin, es hat das gleiche Problem.

<div class="collapse" id="collapseOne"> <!-- bootstrap class on parent -->
    <div class="py-4"> <!-- padding for textarea -->
        <textarea class="form-control" rows="4"></textarea>
    </div> <!-- // padding for textarea -->
</div> <!-- // bootstrap class on parent -->

Getestet auf Bootstrap 3 ✓

Entspricht Bootstrap 4. Wickeln Sie die textarewith- collapseKlasse ein.

<div class="collapse" id="collapseOne"> <!-- bootstrap class on parent -->
    <textarea class="form-control" rows="4"></textarea>
</div> <!-- // bootstrap class on parent -->

Und für padding Bootstrap 3 gibt es keine p- * Klassen wie Bootstrap 4 . Sie müssen also Ihre eigenen erstellen. Nicht benutzen wird paddinges nicht funktionieren, benutzen margin.

#collapseOne textarea {
    margin: 10px 0 10px 0;
}
— Dexter
quelle
2

Meins wurde glatter, indem ich nicht jedes Kind einwickelte, sondern das ganze Markup mit einem Helfer-Div einwickelte . So was:

<div class="accordeonBigWrapper">
    <div class="panel-group accordion partnersAccordeonWrapper" id="partnersAccordeon" role="tablist" aria-multiselectable="false">
         accordeon markup inside...
    </div>
</div>
— vaskort
quelle
2

Stellen Sie keine Höhe für das .collapseTag ein. Dies wirkt sich auf die Animation aus, wenn die Höhe mit CSS überschrieben wird. es wird nicht richtig animiert.

— DDT
quelle
0

Für andere wie mich, die ein anderes, aber ähnliches Problem hatten, bei dem die Animation überhaupt nicht auftrat:

Nach allem, was ich finden konnte, ist es möglicherweise etwas in meiner Browsereinstellung, das aus Gründen der Barrierefreiheit weniger Bewegung bevorzugt. Ich konnte keine Einstellung in meinem Browser finden, aber ich konnte die Animation zum Laufen bringen, indem ich eine lokale Kopie von Bootstrap herunterlud und diesen Abschnitt der CSS-Datei auskommentierte:

@media (prefers-reduced-motion: reduce) {
  .collapsing {
    -webkit-transition: none;
    transition: none;
  }
}
— dev-jeff
quelle
0

Das Auffüllen um das kollabierende Div muss 0 sein

— Adam
quelle
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.