Bootstrap: Comment s'estompent puis cacher quelque chose à l'aide de la valeur par défaut 'fade', 'hide', 'dans' des classes?
Bootstrap rend évidemment l'utilisation de la "cacher", "fade" et "dans" les classes pour ses transitions.
Le problème, je vais avoir, c'est que l'utilisation de "fade" et "dans" la volonté de changer l'opacité de 0 à 1. L'effet de transition est parfaite, mais le contenu est toujours là, prenant de la place sur la page, même si vous ne pouvez pas le voir. Par exemple, si c'est le conteneur a une frontière, il y a un gros espace blanc avant la frontière.
Je veux faire usage de leur capter les transitions CSS en ajoutant et en supprimant le "dans" la classe, mais je veux aussi que quel que soit l'élément qui est à la décoloration, pour être caché, mais seulement après que la transition est terminée. Donc en gros, exactement ce qu'ils font dans la modale, mais je ne sais pas comment ils font.
Dans mon exemple ci-dessous, l'ajout ou la suppression de la cacher signifie que la div s'affiche ou disparaît instantanément, avant que l'effet de fondu peut arriver.
Exemple HTML:
<div class="control-group">
<label class="control-label">Choose one:</label>
<div class="controls">
<label class="radio inline">
<input type="radio" name="color-radio" id="yellow-trigger" value="yellow" />Yellow Box</label>
<label class="radio inline">
<input type="radio" name="color-radio" id="red-trigger" value="red" />Red Box</label>
</div>
</div>
<div id="yellow-box" class="hide fade">
<p>I'm yellow</p>
</div>
<div id="red-box" class="hide fade">
<p>I'm red</p>
</div>
Exemple JS:
$(document).ready(function () {
$('#yellow-trigger').click(function () {
$('#yellow-box').addClass('in').removeClass('hide');
$('#red-box').addClass('hide').removeClass('in');
});
$('#red-trigger').click(function () {
$('#red-box').addClass('in').removeClass('hide');
$('#yellow-box').addClass('hide').removeClass('in');
});
});
- peut-être essayer un temps comme stackoverflow.com/a/13257654/1596547 voir aussi bootply.com/62589
- J'ai utilisé un délai d'attente dans la fin, merci.
Vous devez vous connecter pour publier un commentaire.
Aucune raison de ne pas simplement utiliser jQuery pour le fadeIn effet? Ci-dessous est un peu de code pour faire le fondu en effet avec jQuery.
Violon ici
Supprimé "fade" classe
Mise à jour jQuery pour un fondu
C'est très vieux, mais au cas où quelqu'un d'autre arrive ici, la réponse est d'utiliser un seul coup de feu gestionnaire pour la synthèse de l'événement
bsTransitionEnd
.exemple: