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.
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.
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.
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;
}
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;
}
Une méthode simple, non-CSS pour désactiver l'animation en utilisant jQuery est:
$.support.transition = false
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;
}
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
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>