web-dev-qa-db-ja.com

TwitterをオフにするBootstrap Navbar Transition animation

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

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

遷移アニメーションを削除したい

折りたたまれたnavbarメニューボタンをクリックすると。

enter image description here

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

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

css3twitter-bootstrapcss-transitions
34
InspiredJW

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

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

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

そして、CSS3移行を無効にするCSSルールを定義しますBootstrap defined（CSSルールが解析されていることを確認してくださいafterbootstrap.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を使用することは、将来の更新が苦痛になるため、素晴らしいアイデアではありません。この特定の回避策は、他のBootstrap no-transitionクラスを付与するJavaScriptコンポーネント。

bootstrap-collapse.js ：107

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

2番目に推奨されるオプション：移行を無効にする代わりに、非常に短い移行時間を使用します。これは、あなたが求めたトランジションアニメーションを完全に削除するものではありませんが、低電力のモバイルデバイスのパフォーマンスに顕著な悪影響を与えることなく、同様の結果を達成します。この方法の利点は、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;
}
77
Andy Zarzycki

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

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

}
9
iscaler

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

$.support.transition = false
8
Steven Maude

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;

}
7
Alexandre Prazeres

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

これがまだあなたのサイトにしたいことである場合、良いニュースは、現在のbootstrap=バージョンはnavbarの遷移をもう持っていないようだということです。 http ：//getbootstrap.com/components/#navbar

2
Gabriel

以下のこのコードにより、navbarのデフォルトが開きます。トリックは、クラスcontainerおよびnav-collapseをautoに設定してdivの高さを設定することです。 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>
0
000