Twitter Bootstrap 100％高さのアコーディオン "jump"

Question

私は、このquestionに記載されているように、Twitter Bootstrap折り畳みコンポーネントを使用して100％の高さのアコーディオンを実装しようとしています。

このanswerに記載されている.accordion-inner要素の高さを手動で設定しています。

しかし、私はパネルを展開/折りたたむときに "弾力のある"動作が発生しています。その可能性を排除するために、すべてのパディング/マージン/境界線を.accordion-inner要素から削除しました。

IE10で最も目立っていますが、問題はChromeでも明らかです。

このexampleを参照してください。

この「不安定な」動作の原因は何ですか？

Answer 1

パーティに後期

、しかし：

私は同様の問題を抱えていました。崩壊している部分の下の要素から余白部分を削除し、それをパディングトップ部分に置き換えた場合、遷移はスムーズでした。

隣接する要素のマージンを確認し、可能であれば、それらをパディングと置き換えてみてください。

Answer 2

あなたが見ている「ジャンプ」は、.collapseクラスのCSSトランジションによるものだと思います。

このSOスレッドTurning off Twitter Bootstrap Navbar Transition animationをご覧になると、上書きするCSSクラス 'no-transition'で遷移を無効にする方法がわかります。

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

はCSSを追加します。..

があなたのアコーディオン-body要素にno-transitionを追加...これは、すべて一緒にアニメーションを停止しませんが、ジャンプが目立たなくなるように、それをスピードアップします。 。

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

更新plunker .. http://plnkr.co/edit/xnvDGcDd21iCu69wKSub?p=preview

Answer 3

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

Answer 4

私はアコーディオンは、実際の表示内容よりもはるかに大きい高さに展開し、崩壊してしまう。この奇妙な行動（ジャンプ）を持っていました目に見える実際のコンテンツの高さに戻ります。

このパネルのアコーディオン本体には、いくつかの空のhtml要素がありました。私のケースでは、divsはcol-sm-4クラスであり、内部には何もありません。一度私はそれらをコメントし、このジャンプ動作が停止しました。これが似たような問題を持つ人に役立つことを願って