désactiver l'animation d'ouverture/fermeture de la fermeture de Bootstrap

Question

Existe-t-il une astuce pour désactiver l'animation d'ouverture/fermeture des groupes d'effondrement ?

Answer 1

Pour Bootstrap 3 y 4 c'est

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

Answer 2

Bootstrap 2 Solution CSS :

.collapse {  transition: height 0.01s; }  

NB : mise en place transition: none désactive la fonctionnalité d'effondrement.

---

Bootstrap 4 solution :

.collapsing {
  transition: none !important;
}

Answer 3

Si vous trouvez le 1px Le saut avant l'expansion et après la réduction lors de l'utilisation de la solution CSS est un peu ennuyeux, voici une solution simple JavaScript solution pour Bootstrap 3 ...

Il suffit d'ajouter ceci quelque part dans votre code :

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

Il ne s'agit peut-être pas d'une réponse directe à la question, mais un ajout récent à la base de données de la documentation officielle décrit comment jQuery peut être utilisé pour désactiver les transitions entièrement juste par :

$.support.transition = false

---

Réglage de la .collapsing Transitions CSS à zéro comme indiqué dans la réponse acceptée a supprimé l'animation. Mais cela - dans Firefox et Chromium pour moi - crée un problème visuel indésirable lors de l'effondrement de la barre de navigation.

Par exemple, visitez le site Bootstrap exemple de barre de navigation et ajoutez le CSS de la réponse acceptée :

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

Ce que je vois actuellement, c'est que lorsque la barre de navigation se réduit, la bordure inférieure de la barre de navigation passe momentanément à deux pixels au lieu d'un, puis revient de manière déconcertante à un pixel. En utilisant jQuery, cet artefact n'apparaît pas.