web-dev-qa-db-fra.com

Désactiver l'animation Twitter Bootstrap Navbar Transition

Tout comme http://Twitter.github.com/bootstrap ,

Le site sur lequel je travaille maintenant est responsive.

Je voudrais supprimer l'animation transition 

lorsque je clique sur le bouton de menu réduit de la barre de navigation.

enter image description here

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

Dans TOP-RIGHT-CORNER, vous trouverez un bouton de menu à trois lignes.

css3twitter-bootstrapcss-transitions
30
InspiredJW

Bootstrap réalise l'animation de transition de la barre de navigation réactive de la même manière que toute réduction, à l'aide d'une transition CSS3. Pour désactiver la transition uniquement pour la barre de navigation (en laissant les autres transitions en place), il vous suffit de remplacer le CSS. 

Je suggérerais d'ajouter une classe, telle que no-transition (mais le nom peut être arbitraire) à votre conteneur compressible. 

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

puis en définissant une règle CSS qui désactivera la transition CSS3 définie par Bootstrap (assurez-vous que votre règle CSS est analysée after 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 code 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 ne faites que la modification ci-dessus, vous constaterez que l'objet réductible se "verrouille" après un cycle d'ouverture/fermeture, car il attend toujours le déclenchement de l'événement de fin de transition du navigateur. Il existe deux méthodes moins qu'idéales pour résoudre ce problème:

Première option: pirater bootstrap-collapse.js pour ne pas attendre l'événement de fin de transition. S'amuser avec Bootstrap n'est jamais une bonne idée car cela rendra pénible les futures mises à jour. Cette solution de contournement particulière devra également être appliquée de la même manière à tout autre composant JavaScript Bootstrap auquel vous souhaitez transmettre la classe no-transition.

bootstrap-collapse.js : 107

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

Deuxièmement, option recommandée: utilise un temps de transition ultra-court au lieu de désactiver la transition. Cela ne supprime pas complètement l'animation de transition comme vous l'avez demandé, mais aboutit à un résultat similaire sans incidence négative notable sur les performances de vos appareils mobiles basse consommation. L'avantage de cette méthode est que vous n'avez pas à pirater les fichiers Bootstrap JS, et vous pouvez appliquer no-transition à n'importe quel élément, pas seulement à un repli!

.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;
}
74
Andy Zarzycki

Bootstrap ajoute une classe de réduction lors de l'animation, elle doit donc être remplacé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
iscaler

Une méthode simple, non-CSS pour désactiver l'animation à l'aide de jQuery est la suivante:

$.support.transition = false
8
Steven Maude

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
Alexandre Prazeres

Bien entendu, le passage à l'altitude de transition, même pendant une très courte période, déclenchera toujours Paint; le navigateur devra donc effectuer un travail qui fera probablement baisser la fréquence d'images à 30 ou plus. La modification des fichiers d'amorçage n'est pas idéale non plus, en raison de complications supplémentaires liées aux mises à jour. 

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

2
Gabriel

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 class container et nav-collapse à auto. Si vous souhaitez é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
000