web-dev-qa-db-ja.com

Bootstrap Collapseの開閉アニメーションを無効にする

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

javascriptanimationtwitter-bootstrap
65
younes0

Bootstrapの場合および4

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

Bootstrap 2 CSSソリューション：

.collapse {  transition: height 0.01s; }

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

Bootstrap 4ソリューション：

.collapsing {
  transition: none !important;
}
23
younes0

CSSソリューションを使用する際に1pxがジャンプする前と折りたたむと少しうっとうしい場合は、Bootstrapの簡単な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');
    })
);
17
Saul Fautley

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

$.support.transition = false

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

たとえば、Bootstrap navbar example にアクセスし、受け入れられた回答からCSSを追加します。

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

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

11
Steven Maude