javascript - data - sweet alert bootstrap

deshabilitar la animación de apertura/cierre de Colapso de Bootstrap

Question

Esta pregunta ya tiene una respuesta aquí:

• Desactivar Twitter Bootstrap Navbar Animación de transición 6 respuestas

¿Algún truco para deshabilitar la animación abrir / cerrar de los grupos Contraer?

Answer 1

Solución Bootstrap 2 CSS:

.collapse {  transition: height 0.01s; }  

NB : transition: none configuración transition: none desactiva la funcionalidad de colapso.

Solución Bootstrap 4 :

.collapsing {
  transition: none !important;
}

Answer 2

Para Bootstrap 3 y 4 es

.collapsing {
    -webkit-transition: none;
    transition: none;
    display: none;
}

Answer 3

Si encuentra el salto de 1px antes de expandirse y después de colapsar cuando utiliza la solución de CSS un poco molesto, aquí hay una solución de JavaScript simple para Bootstrap 3 ...

Simplemente agrega esto en algún lugar de tu código:

$(document).ready(
    $(''.collapse'').on(''show.bs.collapse hide.bs.collapse'', function(e) {
        e.preventDefault();
    });
    $(''[data-toggle="collapse"]'').on(''click'', function(e) {
        e.preventDefault();
        $($(this).data(''target'')).toggleClass(''in'');
    });
);

Answer 4

Tal vez no sea una respuesta directa a la pregunta, pero una reciente adición a la documentación oficial describe cómo jQuery se puede usar para deshabilitar transiciones completamente solo por:

$.support.transition = false

Al establecer las transiciones de CSS que se .collapsing a ninguna como se menciona en la respuesta aceptada, se eliminó la animación. Pero esto, en Firefox y Chromium para mí, crea un problema visual no deseado al colapsar la barra de navegación.

Por ejemplo, visite el ejemplo de barra de navegación de Bootstrap y agregue el CSS de la respuesta aceptada:

.collapsing {
     -webkit-transition: none;
     transition: none;
}

Lo que veo actualmente es que cuando la barra de navegación se colapsa, el borde inferior de la barra de navegación se convierte momentáneamente en dos píxeles en lugar de uno, y luego desconcertantemente salta a uno. Usando jQuery, este artefacto no aparece.