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.