web-dev-qa-db-ja.com

Bootstrapアニメーションがスムーズでない

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

問題は、addInfoタブをクリックすると、text_areaの展開にジャンプが見られる、つまり、アニメーションがスムーズではないということです。

jquerytwitter-bootstraptwitter-bootstrap-3
53
shapeare

私がちょうど持っているように、他の誰かがこの問題に出くわした場合、答えは、div内に折りたたむコンテンツをラップし、コンテンツ自体ではなくラッパーdivを折りたたむことです。

<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>
106
Philip Stratford

親div ".collapse"にパディングがある場合、ジャークが発生します。

パディングは、親ではなく子divで行われます。 jQueryはパディングではなく高さをアニメーション化します。

例：

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

両方を表示するフィドル

お役に立てれば。

58
CR Rollyson

@CR Rollysonの回答に追加して、

Min-height属性を持つ折りたたみ可能なdivがある場合、ジャークも発生します。直接折りたたみ可能なdivからその属性を削除してみてください。折りたたみ可能なdivの子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>

フィドル

4
Yogesh Kumar Gupta

ジャークを引き起こす状況はいくつかあると思います。私の例では、問題はアニメーション化されていない子の下マージンを扱います（アニメーション化された親にはマージン/パディングがありませんが）。マージンを削除すると、アニメーションが滑らかになります。

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

フィドル

3
joeshmoe301

私の場合、各子をラップするのではなく、ヘルパーdivでマークアップ全体をラップするによってスムーズになりました。このような：

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

これは答えでしたが https://stackoverflow.com/a/28375912/541328 であり、パディングに関しては元の答えには記載されていませんが、ここでは https://stackoverflow.com/a/33697157/541328 。
私は視覚的な表現とよりクリーンなコードのためにここに追加しています。

Bootstrap 4でテスト✓

新しい親divを作成し、bootstrap collapseを追加します。 textareaからクラスを削除します

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

周囲にスペースを置きたい場合は、textareaをpaddingでラップします。 marginを追加しないでください。同じ問題があります。

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

Bootstrap 3でテスト✓

bootstrapと同じ4. textareをcollapseクラスでラップします。

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

paddingの場合Bootstrap 3には、Bootstrap 4。したがって、独自に作成する必要があります。 paddingは使用しないでください。機能しません。marginを使用してください。

#collapseOne textarea {
    margin: 10px 0 10px 0;
}
2
TheHive

.collapseタグに高さを設定しないでください。高さがcssでオーバーライドされる場合、アニメーションに影響します。正しくアニメーションしません。

1
DDT