web-dev-qa-db-fra.com

désactiver l'animation d'ouverture / fermeture de Collapse dans Bootstrap

Toute astuce pour désactiver l'animation d'ouverture/fermeture des groupes Réduire?

javascriptanimationtwitter-bootstrap
65
younes0

Pour Bootstrap et 4 c'est

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

Bootstrap 2 Solution CSS:

.collapse {  transition: height 0.01s; }

[~ # ~] nb [~ # ~] : le réglage de transition: none désactive la fonctionnalité de réduction.

Solution Bootstrap 4:

.collapsing { transition: none !important; } 

 23 
younes0
Si vous trouvez que le saut 1px avant le développement et après la réduction lors de l'utilisation de la solution CSS est un peu gênant, voici une solution simple JavaScript pour Bootstrap. ..
Ajoutez simplement 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');
    })
);

 17 
Saul Fautley
Peut-être pas une réponse directe à la question, mais un ajout récent au documentation officielle décrit comment jQuery peut être utilisé pour désactiver entièrement les transitions  juste par:
$.support.transition = false

Réglage du .collapsing CSS transitions à aucun comme indiqué dans la réponse acceptée a supprimé l'animation. Mais ceci - 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 Bootstrap exemple de navbar) 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 s’effondre, le bord inférieur de la barre de navigation devient momentanément deux pixels au lieu d’un, puis revient à un de façon déconcertante. En utilisant jQuery, cet artefact n'apparaît pas.
 11 
Steven Maude