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');
});
});
发布于 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');
});
});
发布于 2015-10-06 19:28:48
这是非常古老的,但如果其他人到达这里,答案是使用合成事件bsTransitionEnd
的单发处理程序。
示例:
$(".alert").one('bsTransitionEnd',function() {
$(this).addClass('hide');
});
window.setTimeout(function(){
$(".alert").removeClass('in');
},1000);
https://stackoverflow.com/questions/16829509
复制相似问题