Wyłączanie animacji przejścia na pasku nawigacyjnym Twittera Bootstrap
Tak jak http://twitter.github.com/bootstrap ,
Strona, nad którą teraz pracuję, jest responsywna.
I would like to remove transition animation
Kiedy klikam zwinięty przycisk Menu navbar.
Powyższe zdjęcie to zrzut ekranu tego, o co Proszę.
W W prawym górnym rogu znajduje się trzylinijkowy przycisk menu.
6 answers
Bootstrap wykonuje animację przejścia responsywnego paska nawigacyjnego w ten sam sposób, w jaki wykonuje wszelkie zwarcia, które są używane przy użyciu przejścia CSS3. Aby wyłączyć Przejście tylko dla paska nawigacyjnego (pozostawiając inne przejścia na swoim miejscu), musisz po prostu nadpisać CSS.
Sugerowałbym dodanie klasy, takiej jak no-transition (ale nazwa może być dowolna) do składanego kontenera
<div class="nav-collapse no-transition">
A następnie zdefiniowanie reguły CSS, która wyłączy Przejście CSS3, które Bootstrap zdefiniowane (upewnij się, że reguła CSS jest przetwarzana po bootstrap.css):
.no-transition {
-webkit-transition: height 0;
-moz-transition: height 0;
-ms-transition: height 0;
-o-transition: height 0;
transition: height 0;
}
Ale nie zatrzymuj się na tym! skrypt JavaScript Bootstrap jest zakodowany na twardo, aby założyć, że przejście nastąpi, jeśli przejścia są obsługiwane przez przeglądarkę. Jeśli dokonasz powyższej zmiany, zauważysz, że zwijany obiekt "blokuje się" po jednym cyklu otwierania/zamykania, ponieważ nadal czeka na zdarzenie końca przejścia przeglądarki. Istnieją dwa mniej niż idealne sposoby obejścia to:
Pierwsza opcja: hack bootstrap-zwiń.js, aby nie czekać na zdarzenie końca przejścia. Mieszanie z Bootstrap nigdy nie jest świetnym pomysłem, ponieważ sprawi, że przyszłe aktualizacje będą dla Ciebie bolesne. To konkretne obejście musiałoby być podobnie zastosowane do każdego innego komponentu JavaScript Bootstrap, do którego chcesz przypisać klasę no-transition.
this.$element.hasClass('no-transition') || (this.transitioning = 1);
Druga, zalecana, opcja: użyj ultrakrótkiego czas przejścia zamiast wyłączania przejścia. Nie usuwa to animacji przejścia, jak prosiłeś, ale osiąga podobny wynik, prawdopodobnie nie zauważalny negatywny wpływ na wydajność urządzeń mobilnych o niskiej mocy. Zaletą tej metody jest to, że nie musisz hakować żadnych plików JS Bootstrap, i możesz zastosować no-transition do dowolnego elementu, a nie tylko do zwinięcia!
.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;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-11-11 20:52:18
Bootstrap dodaje klasę zwijającą się podczas animacji, więc musi zostać nadpisana.
.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;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-11-19 19:52:29
A prosta, nie-CSS Metoda aby wyłączyć animację za pomocą jQuery jest:
$.support.transition = false
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-05-02 22:07:12
Dodaj go do niestandardowego pliku css zaraz po wywołaniu 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;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-11-05 05:56:37
Oczywiście zmiana wysokości nawet na bardzo krótki okres nadal będzie wywoływać paint, więc przeglądarka będzie musiała wykonać pracę, która najprawdopodobniej zmniejszy liczbę klatek na sekundę do 30 lub więcej. Edycja plików bootstrap również nie jest idealna, ze względu na dodatkowe komplikacje aktualizacji.
Jeśli nadal jest to coś, co chciałbyś zrobić na swojej stronie, dobrą wiadomością jest to, że obecna wersja bootstrap nie wydaje się już mieć przejść dla navbara. http://getbootstrap.com/components/#navbar
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-04-10 11:36:51
Za pomocą poniższego kodu otrzymasz domyślnie otwarty pasek nawigacyjny. Sztuczka polega na ustawieniu wysokości div z klasą container i nav-collapse na auto. Jeśli chcesz również, aby przycisk menu z trzema liniami był całkowicie nieaktywny, Usuń data-toggle="collapse" z poniższego kodu.
<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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-10-29 17:26:50