Bootstrap：如何使用默認的「淡入淡出」，「隱藏」，「在'類中淡出然後隱藏某些內容？

Question

Bootstrap顯然使用'hide'，'fade'和'in'類來進行轉換。

我遇到的問題是，使用「淡入淡出」和「中」會將不透明度從0更改爲1.過渡效果非常好，但內容仍然佔用頁面上的空間，即使你看不到它。例如，如果它的容器具有邊框，則在邊框之前會有一個大的空白區域。

我想通過添加和刪除'in'類來利用其現有的CSS轉換，但我也想要任何淡出的元素隱藏起來，但只有在轉換結束後。基本上，他們在模態中所做的事情，但我不知道他們是如何做到的。

在我的下面的例子中，添加或刪除隱藏意味着div會在淡出效果發生之前立即出現或消失。

JS fiddle here

示例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> 

例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

任何理由不只是使用jQuery的淡入效果？以下是使用jQuery實現淡入效果的一些代碼。

Fiddle here

刪除 「褪色」 類

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

在

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

}）更新的jQuery爲褪色;

Answer 2

這是非常古老的，但如果有其他人來到這裏，答案是使用合成事件bsTransitionEnd的單發處理程序。

例如：

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