Desactivar Twitter Bootstrap Navbar Animación de transición
Igual que http://twitter.github.com/bootstrap ,
El sitio en el que estoy trabajando ahora es responsivo.
Me gustaría eliminar animación de transición
Cuando hago clic en el botón de menú de la barra de navegación contraído.
La imagen de arriba es la captura de pantalla de lo que estoy pidiendo.
En ESQUINA SUPERIOR DERECHA, hay un botón de menú de tres líneas.
6 answers
Bootstrap realiza la animación de transición de la barra de navegación sensible de la misma manera que hace cualquier colapso, que está utilizando una transición CSS3. Para desactivar la transición solo para la barra de navegación (dejando cualquier otra transición en su lugar), simplemente tiene que anular el CSS.
Sugeriría agregar una clase, como no-transition (pero el nombre puede ser arbitrario) a su contenedor plegable
<div class="nav-collapse no-transition">
Y luego definir una regla CSS que deshabilite la transición CSS3 que Bootstrap definido (asegúrese de que su regla CSS se analiza después de bootstrap.css):
.no-transition {
-webkit-transition: height 0;
-moz-transition: height 0;
-ms-transition: height 0;
-o-transition: height 0;
transition: height 0;
}
¡Pero no te detengas ahí! El JavaScript de Bootstrap está codificado para asumir que una transición tendrá lugar si las transiciones son compatibles con el navegador. Si solo realiza el cambio anterior, encontrará que el objeto plegable "se bloquea" después de un ciclo de apertura/cierre, porque todavía está esperando que se active el evento de fin de transición del navegador. Hay dos maneras menos que ideales de trabajar alrededor esto:
Primera opción: hack bootstrap-collapse.js para no esperar al evento final de transición. Jugar con Bootstrap nunca es una gran idea porque hará que las actualizaciones futuras sean un dolor para ti. Esta solución en particular también tendría que aplicarse de manera similar a cualquier otro componente JavaScript de Bootstrap en el que desee impartir la clase no-transition.
this.$element.hasClass('no-transition') || (this.transitioning = 1);
Segundo, recomendado, opción: utilice un ultra-corto tiempo de transición en lugar de deshabilitar la transición. Esto no elimina la animación de transición como pediste, pero logra un resultado similar con un impacto negativo notorio en el rendimiento de tus dispositivos móviles de baja potencia. La ventaja de este método es que no tienes que hackear ningún archivo JS de Bootstrap, y puedes aplicar no-transition a cualquier elemento, ¡no solo a un colapso!
.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/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-11-11 20:52:18
Bootstrap añade la clase collapsing durante la animación, por lo que tiene que ser sobrescrita.
.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/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-11-19 19:52:29
Un método simple, no CSS para deshabilitar la animación usando jQuery es:
$.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/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-05-02 22:07:12
Agréguelo en un archivo css personalizado justo después de llamar a 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/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-11-05 05:56:37
Por supuesto, la altura de transición, incluso durante un período muy corto, todavía activará la pintura, por lo que el navegador tendrá que hacer un trabajo que probablemente bajará la velocidad de fotogramas a 30 más o menos. La edición de los archivos bootstrap tampoco es ideal, debido a las complicaciones de actualización adicionales.
Si esto todavía es algo que le gustaría hacer a su sitio, la buena noticia es que la versión actual de bootstrap no parece tener transiciones para navbar más. 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/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-04-10 11:36:51
Por este código a continuación obtendrá la barra de navegación por defecto abierta. El truco es establecer la altura de div con la clase container y nav-collapse a auto. Si también desea que el botón de menú de tres líneas esté totalmente inactivo, elimine data-toggle="collapse" del siguiente código.
<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/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-10-29 17:26:50