Deaktivieren der Bootstrap Navbar-Übergangsanimation

Genau wie http://twitter.github.com/bootstrap,

Den Ort, was ich jetzt responsive ist.

Möchte ich entfernen übergang animation

wenn ich auf das minimierte navbar Menü-Taste.

Bild oben ist der screenshot von dem, was ich verlange.

In OBEN-RECHTS-ECKEes ist ein drei gesäumten Menü-Taste.

InformationsquelleAutor der Frage InspiredJW | 2012-10-29

72

Bootstrap führt die übergangsanimation für das responsive-nav-bar die gleiche Weise, es wird kein Zusammenbruch, der mit einer CSS3-transition. Zum ausschalten der übergang nur für die navbar (so dass keine anderen übergänge im Ort), Sie haben einfach das überschreiben der CSS.

Ich würde vorschlagen, das hinzufügen einer Klasse, wie no-transition (aber der name kann beliebig sein) auf Ihrer collapsible container
```
<div class="nav-collapse no-transition">
```
und dann die Definition einer CSS-Regel, die deaktiviert wird, CSS3 übergang, Bootstrap definiert wird (stellen Sie sicher, dass Ihre CSS-Datei geparst wird nach bootstrap.css):
```
.no-transition {
  -webkit-transition: height 0;
  -moz-transition: height 0;
  -ms-transition: height 0;
  -o-transition: height 0;
  transition: height 0;
}
```
Aber, nicht dort zu stoppen! Bootstrap JavaScript ist hart codiert davon ausgehen, dass ein übergang findet statt, wenn die übergänge vom browser unterstützt werden. Wenn Sie nur nehmen Sie die änderung vor, Sie werden feststellen, dass die Klapp-Objekt "sperren" nach einem öffnen/schließen-Zyklus, weil es immer noch warten für den browser, den übergang end-Ereignis ausgelöst. Es gibt zwei weniger-als-idealen Möglichkeiten, dies zu umgehen:

Erste option: hack bootstrap-collapse.js nicht warten Sie, für den übergang end-Ereignis. Messing mit Bootstrap ist nie eine gute Idee, denn es werden zukünftige updates für ein Schmerz für Sie. Diese Besondere work-around würde auch brauchen, um in ähnlicher Weise auf alle anderen Bootstrap-JavaScript-Komponente auf die Sie wünschen, zu vermitteln no-transition Klasse.

bootstrap-collapse.js:107
```
      this.$element.hasClass('no-transition') || (this.transitioning = 1);
```
Zweite, empfohlene option: verwenden Sie einen ultra-kurzen übergangszeit anstatt deaktivieren der übergang. Diese nicht ganz entfernen Sie den übergang animation, wie Sie fragte, aber es führt zu einem ähnlichen Ergebnis, mit dem wahrscheinlich keine spürbaren negativen Auswirkungen auf die Leistung Ihres low-powered mobile Geräte. Der Vorteil dieser Methode ist, dass Sie nicht zu hacken, jedes Bootstrap-JS-Dateien, und Sie anwenden können no-transition für jedes element, nicht nur ein Zusammenbruch!
```
.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;
}
```
InformationsquelleAutor der Antwort Andy Zarzycki

Bootstrap fügt einstürzenden Klasse während der animation, also muss es überschrieben werden.

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

}

InformationsquelleAutor der Antwort iscaler

8

Einen einfache, nicht-CSS-Methode deaktivieren Sie die animation mit jQuery ist:
```
$.support.transition = false
```
InformationsquelleAutor der Antwort Steven Maude

Fügen Sie es auf eine benutzerdefinierte css-Datei einfach nach dem Aufruf von bootstrap.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;

}

InformationsquelleAutor der Antwort Alexandre Prazeres

2

Natürlich, übergang Höhe sogar für eine sehr kurze Zeit noch auslösen malen, damit der browser haben, um Arbeit zu tun, die wahrscheinlich Tauchen Sie die frame-rate auf 30 oder so. Bearbeiten der bootstrap-Dateien ist auch nicht ideal, weil der hinzugefügten update-Komplikationen.

Ist dies noch etwas, das Sie tun möchten, um Ihre Website, die gute Nachricht ist, dass die aktuelle bootstrap-version nicht zu haben scheinen übergänge für navbar mehr. http://getbootstrap.com/components/#navbar

InformationsquelleAutor der Antwort Gabriel

Durch diesen code unten erhalten Sie die Navigationsleiste standardmäßig zu öffnen. Der trick ist, die Einstellung der Höhe des div mit der Klasse container und nav-collapse zu auto. Wenn Sie wollen auch die drei gesäumten Menü-Taste, um völlig inaktiv sind, dann entfernen data-toggle="collapse" aus den untenstehenden code.

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

InformationsquelleAutor der Antwort 000

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.