web-dev-qa-db-fra.com

Bootstrap: Comment estomper puis cacher quelque chose en utilisant les classes par défaut 'fade', 'hide', 'in'?

Bootstrap utilise évidemment les classes 'hide', 'fade' et 'in' pour ses transitions.

Le problème que je rencontre est que l'utilisation de 'fade' et 'in' changera l'opacité de 0 à 1. L'effet de transition est parfait, mais le contenu est toujours là prenant de l'espace sur la page, même si vous ne pouvez pas le voir. Par exemple, si son conteneur a une bordure, il y aura un grand espace blanc avant la bordure.

Je veux utiliser leurs transitions CSS existantes en ajoutant et en supprimant la classe `` in '', mais je veux également que tout élément qui disparaît, soit masqué, mais seulement après la transition. Donc, fondamentalement, exactement ce qu'ils font dans le modal, mais je ne sais pas comment ils le font.

Dans mon exemple ci-dessous, l'ajout ou la suppression du masquage signifie que le div apparaît ou disparaît instantanément, avant que l'effet de fondu ne se produise.

violon JS ici

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');
    });
});
jquerytwitter-bootstrapshow-hide
8
davidpauljunior

Une raison de ne pas simplement utiliser jQuery pour l'effet fadeIn? Vous trouverez ci-dessous du code pour appliquer l'effet de fondu avec jQuery.

Violon ici

Suppression de la classe "fondu"

<div id="yellow-box" class="hide">
<p>I'm yellow</p> </div>

Mise à jour de jQuery pour le fondu

$(document).ready(function () {

  $('#yellow-trigger').click(function () {
      $('#red-box').hide();
      $('#yellow-box').fadeIn('slow');
  });

  $('#red-trigger').click(function () {
      $('#yellow-box').hide();
      $('#red-box').fadeIn('slow');     
  });

});
15
Zane

C'est très ancien, mais si quelqu'un d'autre arrive ici, la réponse est d'utiliser un gestionnaire à un coup pour l'événement synthétique bsTransitionEnd.

exemple:

$(".alert").one('bsTransitionEnd',function() {
    $(this).addClass('hide');
});
window.setTimeout(function(){
    $(".alert").removeClass('in');
},1000);
6
Seth Kingsley