Bootstrap-Kollapsanimation nicht reibungslos

<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>

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.

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>

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.

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

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

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

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>

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.

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

Das Auffüllen um das kollabierende Div muss 0 sein