Bootstrap:如何使用默认的' fade '，' hide '，'in‘类淡出然后隐藏一些东西？
Bootstrap:如何使用默认的' fade '，' hide '，'in‘类淡出然后隐藏一些东西？
提问于 2013-05-30 14:36:46
Bootstrap显然使用了'hide'，'fade‘和'in’类来进行转换。
我遇到的问题是，使用“淡入”和“淡入”会将不透明度从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');
});
});回答 2
Stack Overflow用户
发布于 2013-05-30 16:15:40
有什么理由不只使用jQuery来实现fadeIn效果吗？下面是一些使用jQuery实现淡入淡出效果的代码。
删除“淡入淡出”类
<div id="yellow-box" class="hide">
<p>I'm yellow</p> </div>已更新淡入的jQuery
$(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');
});
});Stack Overflow用户
发布于 2015-10-06 19:28:48
这是非常古老的，但如果其他人到达这里，答案是使用合成事件bsTransitionEnd的单发处理程序。
示例：
$(".alert").one('bsTransitionEnd',function() {
$(this).addClass('hide');
});
window.setTimeout(function(){
$(".alert").removeClass('in');
},1000);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/16829509
复制相关文章
相似问题
腾讯云开发者
