Désactiver L'animation de transition Twitter Bootstrap Navbar

Comme http://twitter.github.com/bootstrap,

Le site sur lequel je travaille maintenant est réactif.

Je voudrais enlever animation de transition

Lorsque je clique sur le bouton de menu de la barre de navigation réduite.


entrez la description de l'image ici

L'image ci-dessus est la capture d'écran de ce que je demande.

À en haut à droite, Il y a un bouton de menu à trois lignes.

29
demandé sur InspiredJW 2012-10-29 14:34:41

6 réponses

Bootstrap accomplit l'animation de transition de la barre de navigation réactive de la même manière qu'il fait tout effondrement, qui utilise une transition CSS3. Pour désactiver la transition uniquement pour la barre de navigation (en laissant d'autres transitions en place), vous devez simplement remplacer le CSS.

Je suggère d'ajouter une classe, telle que no-transition (mais le nom peut être arbitraire) à votre conteneur pliable

<div class="nav-collapse no-transition">

Et ensuite définir une règle CSS qui désactivera la transition CSS3 qui Bootstrap défini (assurez-vous que votre règle CSS est analysée après bootstrap.css):

.no-transition {
  -webkit-transition: height 0;
  -moz-transition: height 0;
  -ms-transition: height 0;
  -o-transition: height 0;
  transition: height 0;
}

Mais, ne vous arrêtez pas là! le JavaScript de Bootstrap est codé en dur pour supposer qu'une transition aura lieu si les transitions sont prises en charge par le navigateur. Si vous faites simplement la modification ci-dessus, vous constaterez que l'objet pliable "se verrouille" après un cycle d'ouverture/fermeture, car il attend toujours que l'événement de fin de transition du navigateur se déclenche. Il y a deux façons moins que idéales de contourner ce:

Première option: hack bootstrap-effondrement.js pour ne pas attendre l'événement de fin de transition. Jouer avec Bootstrap n'est jamais une bonne idée car cela fera des mises à jour futures une douleur pour vous. Ce contournement particulier devrait également être appliqué de la même manière à tout autre composant JavaScript Bootstrap sur lequel vous souhaitez transmettre la classe no-transition.

Bootstrap-effondrement.js:107

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

Deuxièmement, recommandé, option: utiliser un ultra-courte temps de transition au lieu de désactiver la transition. Cela ne supprime pas tout à fait l'animation de transition comme vous l'avez demandé, mais il obtient un résultat similaire avec probablement aucun impact négatif notable sur les performances de vos appareils mobiles de faible puissance. L'avantage de cette méthode est que vous n'avez pas à pirater les fichiers JS Bootstrap, et Vous pouvez appliquer no-transition à n'importe quel élément, pas seulement un effondrement!

.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;
}
72
répondu Andy Zarzycki 2014-11-11 20:52:18

Bootstrap ajoute une classe qui s'effondre pendant l'animation, elle doit donc être écrasée.

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

}
8
répondu iscaler 2014-11-19 19:52:29

Une méthode simple, non-CSS pour désactiver l'animation en utilisant jQuery est:

$.support.transition = false
8
répondu Steven Maude 2015-05-02 22:07:12

Ajoutez-le sur un fichier CSS personnalisé juste après avoir appelé 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;

}
6
répondu Alexandre Prazeres 2017-11-05 05:56:37

Bien sûr, la hauteur de transition même pour une très courte période déclenchera toujours la peinture, ainsi le navigateur devra faire un travail qui va probablement plonger la fréquence d'images à 30 ou plus. L'édition des fichiers bootstrap n'est pas non plus idéale, en raison de complications de mise à jour supplémentaires.

Si c'est toujours quelque chose que vous aimeriez faire sur votre site, la bonne nouvelle est que la version actuelle de bootstrap ne semble plus avoir de transitions pour navbar. http://getbootstrap.com/components/#navbar

2
répondu Gabriel 2015-04-10 11:36:51

Par ce code ci-dessous, vous obtiendrez la barre de navigation par défaut ouverte. L'astuce consiste à définir la hauteur de div avec la classe container et nav-collapse à auto. Si vous voulez également que le bouton de menu à trois lignes soit totalement inactif, supprimez data-toggle="collapse" du code ci-dessous.

 <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>
0
répondu 000 2012-10-29 17:26:50