Bootstrap显然使用'hide','fade'和'in'类来进行转换。Bootstrap:如何使用默认的“淡入淡出”,“隐藏”,“在'类中淡出然后隐藏某些内容?
我遇到的问题是,使用“淡入淡出”和“中”会将不透明度从0更改为1.过渡效果非常好,但内容仍然占用页面上的空间,即使你看不到它。例如,如果它的容器具有边框,则在边框之前会有一个大的空白区域。
我想通过添加和删除'in'类来利用其现有的CSS转换,但我也想要任何淡出的元素隐藏起来,但只有在转换结束后。基本上,他们在模态中所做的事情,但我不知道他们是如何做到的。
在我的下面的例子中,添加或删除隐藏意味着div会在淡出效果发生之前立即出现或消失。
示例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');
});
});
可能会尝试超时像http://stackoverflow.com/a/13257654/1596547又见http://bootply.com/62589 –
我到底使用超时, 谢谢。 – davidpauljunior