javascript - Bootstrapの折りたたみ開閉アニメーションを無効にする

Question

折りたたみグループの開閉アニメーションを無効にするトリックはありますか？

Answer 1

Bootstrap3および4の場合は

.collapsing {
    -webkit-transition: none;
    transition: none;
    display: none;
}

Answer 2

Bootstrap 2CSSソリューション：

.collapse {  transition: height 0.01s; }  

注意：設定transition: noneすると、折りたたみ機能が無効になります。

---

Bootstrap 4解決：

.collapsing {
  transition: none !important;
}

Answer 3

CSSソリューションを使用しているときに、展開する前と折りたたんだ後に1pxジャンプするのが少し面倒な場合は、Bootstrap3用の簡単なJavaScriptソリューションを次に示します...

これをコードのどこかに追加するだけです。

$(document).ready(
    $('.collapse').on('show.bs.collapse hide.bs.collapse', function(e) {
        e.preventDefault();
    }),
    $('[data-toggle="collapse"]').on('click', function(e) {
        e.preventDefault();
        $($(this).data('target')).toggleClass('in');
    })
);

Answer 4

質問に対する直接の答えではないかもしれませんが、公式ドキュメントへの最近の追加では、 jQueryを使用して遷移を完全に無効にする方法について次のように説明しています。

$.support.transition = false

---

受け入れられた回答に記載されているように.collapsingCSSトランジションをnoneに設定すると、アニメーションが削除されました。しかし、これは、FirefoxとChromiumの場合、ナビゲーションバーの折りたたみ時に望ましくない視覚的な問題を引き起こします。

たとえば、Bootstrapナビゲーションバーの例にアクセスし、受け入れられた回答からCSSを追加します。

.collapsing {
     -webkit-transition: none;
     transition: none;
}

私が現在見ているのは、ナビゲーションバーが折りたたまれたとき、ナビゲーションバーの下の境界線が一時的に1ピクセルではなく2ピクセルになり、その後、当惑して1つに戻ります。jQueryを使用すると、このアーティファクトは表示されません。