37

http://twitter.github.com/bootstrapのように、

私が今取り組んでいるサイトはレスポンシブです。

トランジションアニメーションを削除したい

折りたたまれたナビゲーションバーメニューボタンをクリックしたとき。

ここに画像の説明を入力してください

上の写真は私が求めているもののスクリーンショットです。

TOP-RIGHT-CORNERには、3列のメニューボタンがあります。

4

6 に答える 6

84

Bootstrapは、CSS3トランジションを使用する折りたたみと同じ方法で、レスポンシブナビゲーションバーのトランジションアニメーションを実行します。ナビゲーションバーのみのトランジションをオフにするには（他のトランジションはそのままにしておきます）、CSSをオーバーライドするだけです。

no-transition折りたたみ可能なコンテナに（ただし、名前は任意にすることができます）などのクラスを追加することをお勧めします

<div class="nav-collapse no-transition">

次に、Bootstrapが定義したCSS3遷移を無効にするCSSルールを定義します（CSSルールがbootstrap.cssの後に解析されることを確認してください）。

.no-transition {
  -webkit-transition: height 0;
  -moz-transition: height 0;
  -ms-transition: height 0;
  -o-transition: height 0;
  transition: height 0;
}

しかし、そこで止まらないでください！BootstrapのJavaScriptは、ブラウザでトランジションがサポートされている場合にトランジションが発生することを想定してハードコーディングされています。上記の変更を行うだけで、折りたたみ可能なオブジェクトは、ブラウザの遷移終了イベントが発生するのをまだ待機しているため、1回の開閉サイクルの後に「ロック」されることがわかります。これを回避するには、2つの理想的とは言えない方法があります。

最初のオプション： bootstrap-collapse.jsをハックして、遷移終了イベントを待たないようにします。Bootstrapをいじることは、将来の更新を苦痛にするので、決して素晴らしい考えではありません。no-transitionこの特定の回避策は、クラスを付与する他のBootstrapJavaScriptコンポーネントにも同様に適用する必要があります。

bootstrap-collapse.js：107

      this.$element.hasClass('no-transition') || (this.transitioning = 1);

次に、推奨されるオプション：遷移を無効にするのではなく、超短遷移時間を使用します。これは、あなたが尋ねたようにトランジションアニメーションを完全に削除するわけではありませんが、低電力のモバイルデバイスのパフォーマンスに目立った悪影響を与えることなく、同様の結果を達成します。この方法の利点は、Bootstrap JSファイルをハックする必要がno-transitionなく、折りたたみだけでなく、任意の要素に適用できることです。

.no-transition {
  -webkit-transition: height 0.01s;
  -moz-transition: height 0.01s;
  -ms-transition: height 0.01s;
  -o-transition: height 0.01s;
  transition: height 0.01s;
}
于 2012-12-11T22:58:46.840 に答える
13

Bootstrapは、アニメーション中に折りたたみクラスを追加するため、上書きする必要があります。

.navbar-collapse.collapsing {
  -webkit-transition: height 0.01s;
  -moz-transition: height 0.01s;
  -ms-transition: height 0.01s;
  -o-transition: height 0.01s;
  transition: height 0.01s;

}
于 2014-11-19T19:52:29.517 に答える
8

jQueryを使用してアニメーションを無効にする簡単な非CSSメソッドは次のとおりです。

$.support.transition = false
于 2015-05-02T22:07:12.540 に答える
7

bootstrap.cssを呼び出した直後にカスタムcssファイルに追加します

.collapsing {
  -webkit-transition: height 0.01s;
  -moz-transition: height 0.01s;
  -ms-transition: height 0.01s;
  -o-transition: height 0.01s;
  transition: height 0.01s;

}
于 2015-10-18T06:27:28.957 に答える
2

もちろん、非常に短い期間でも高さを遷移させるとペイントがトリガーされるため、ブラウザはフレームレートを30程度に下げる可能性が高い作業を行う必要があります。更新の複雑さが増すため、ブートストラップファイルの編集も理想的ではありません。

これがまだサイトに対して行いたいことである場合、幸いなことに、現在のブートストラップバージョンにはnavbarのトランジションがないようです。http://getbootstrap.com/components/#navbar

于 2015-04-10T11:36:51.117 に答える
0

以下のこのコードにより、ナビゲーションバーのデフォルトが開きます。秘訣は、クラスcontainerとnav-collapseにdivの高さを設定することautoです。3行のメニューボタンも完全に非アクティブにしたい場合はdata-toggle="collapse"、以下のコードから削除してください。

 <div class="navbar">
    <div class="navbar-inner">
    <div class="container" style="height:auto">

    <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
    <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">

    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    </a>

    <!-- Be sure to leave the brand out there if you want it shown -->
    <a class="brand" href="#">Project name</a>

    <!-- Everything you want hidden at 940px or less, place within here -->
    <div class="nav-collapse" style="height:auto">
    <!-- .nav, .navbar-search, .navbar-form, etc -->
<ul class="nav">
<li><a href="#">Link 1</a></li>   
 <li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
    </ul>
    </div>

    </div>
    </div>
    </div>
于 2012-10-29T17:26:50.297 に答える