Bootstrap: jak blaknąć, a następnie ukryć coś przy użyciu domyślnych klas "zanikania", "ukrywania", "w"?

Question

Bootstrap oczywiście korzysta z klas "ukryj", "zanik" i "w" dla swoich przejść.

Problem polega na tym, że użycie opcji "zanikania" i "w" spowoduje zmianę stopnia przezroczystości z 0 na 1. Efekt przejścia jest doskonały, ale zawartość jest nadal dostępna, zajmując miejsce na stronie, nawet jeśli nie możesz tego zobaczyć. Na przykład, jeśli kontener ma ramkę, przed granicą pojawi się spora biała spacja.

Chcę użyć istniejących przejść CSS, dodając i usuwając klasę "in", ale chcę też, aby element, który zanika, był ukryty, ale dopiero po zakończeniu przejścia. Zasadniczo dokładnie to, co robią w modalu, ale nie wiem, jak to robią.

W poniższym przykładzie dodawanie lub usuwanie ukrywania oznacza, że ​​element div pojawia się lub znika natychmiast, zanim efekt zniknie z ekranu.

JS fiddle here

Przykład 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> 

Przykład 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'); 
    }); 
}); 

Answer 1

Każdy powód nie po prostu użyć jQuery dla efektu fadeIn? Poniżej znajduje się kod, który pozwoli uzyskać efekt zanikania z jQuery.

Fiddle here

Usunięto klasy "zanikanie"

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

Aktualizacja jQuery do pojawiania się

$(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');  
}); 

});

Answer 2

To jest bardzo stare, ale na wypadek, gdyby ktoś tu przyszedł, odpowiedzią jest użycie jednorazowego uchwytu do zdarzenia syntetycznego bsTransitionEnd.

przykład:

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