css3 - transicion - transition css hover

Desactivar la animación de transición de Twitter Bootstrap Navbar

Question

Al igual que http://twitter.github.com/bootstrap ,

El sitio en el que trabajo ahora es receptivo.

Me gustaría eliminar la animación de transición

cuando hago clic en el botón del menú de la barra de navegación colapsó.

La imagen de arriba es la captura de pantalla de lo que estoy preguntando.

En TOP-RIGHT-CORNER , hay un botón de menú de tres líneas.

Answer 1

Añádalo a 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;

}

Answer 2

Bootstrap agrega clases que se colapsan durante la animación, por lo que debe sobrescribirse.

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

}

Answer 3

Bootstrap realiza la animación de transición de la barra de navegación receptiva de la misma manera que cualquier colapso, que utiliza 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 de CSS que deshabilitará la transición de CSS3 que definió Bootstrap (asegúrese de que su regla de 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 allí! El JavaScript de Bootstrap está codificado para suponer que se producirá una transición si el navegador admite transiciones. Si acaba de realizar el cambio anterior, encontrará que el objeto plegable se "bloquea" después de un ciclo de apertura / cierre, porque todavía está esperando a que se active el evento final de transición del navegador. Hay dos formas menos que ideales de evitar esto:

Primera opción: hackear bootstrap-collapse.js para no esperar el evento final de transición. Enredarse con Bootstrap nunca es una gran idea porque hará que las actualizaciones futuras sean una molestia para usted. Este trabajo en particular también debería aplicarse de manera similar a cualquier otro componente de Bootstrap JavaScript en el que desee impartir la clase de no-transition .

bootstrap-collapse.js : 107

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

Segunda opción recomendada: use un tiempo de transición ultracorto en lugar de deshabilitar la transición. Esto no elimina por completo la animación de transición como usted solicitó, pero logra un resultado similar con un impacto negativo notorio en el rendimiento de sus dispositivos móviles de baja potencia. La ventaja de este método es que no tiene que hackear ningún archivo Bootstrap JS, y puede 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;
}

Answer 4

Con este código a continuación, obtendrás la barra de navegación predeterminada abierta. El truco es establecer la altura de div con el container clase y nav-collapse en auto . Si también desea que el botón de menú con tres líneas esté totalmente inactivo, quite data-toggle="collapse" del código siguiente.

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

Answer 5

Por supuesto, la transición de la altura incluso durante un período muy corto disparará la pintura, por lo que el navegador tendrá que realizar un trabajo que muy probablemente reducirá la velocidad de cuadros a 30 o más. La edición de los archivos de arranque tampoco es ideal, debido a complicaciones adicionales de actualización.

Si esto todavía es algo que le gustaría hacer a su sitio, la buena noticia es que la versión de arranque actual ya no parece tener transiciones para navbar. http://getbootstrap.com/components/#navbar

Answer 6

Un método simple, sin CSS para deshabilitar la animación con jQuery es:

$.support.transition = false