jQuery Bootstrap：如何使用默认的“fade”、“hide”、“in”类淡化然后隐藏某些东西？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16829509/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap: How to fade and then hide something using the default 'fade', 'hide', 'in' classes?
提问by davidpauljunior
Bootstrap obviously makes use of the 'hide', 'fade' and 'in' classes for its transitions.
Bootstrap 显然使用 'hide'、'fade' 和 'in' 类进行转换。
The problem I'm having is that using 'fade' and 'in' will change the opacity from 0 to 1. The transition effect is perfect, but the content is still there taking up space on the page, even if you can't see it. For example, if it's container has a border, there'll be a big white space before the border.
我遇到的问题是使用 'fade' 和 'in' 会将不透明度从 0 更改为 1。过渡效果是完美的，但内容仍然占据页面上的空间，即使您不能看见。例如，如果它的容器有边框，则边框前会有一个很大的空白区域。
I want to make use of their exisiting CSS transitions by adding and removing the 'in' class, but I also want whatever element that's fading out, to be hidden, but only after the transition is over. So basically, exactly what they do in the modal, but I don't know how they do it.
我想通过添加和删除 'in' 类来利用他们现有的 CSS 过渡，但我也希望任何淡出的元素都隐藏起来，但只有在过渡结束后才能隐藏。所以基本上，正是他们在模态中所做的，但我不知道他们是如何做到的。
In my example below, adding or remove the hide means the div appears or disappears instantly, before the fade effect can happen.
在我下面的示例中，添加或删除隐藏意味着 div 在淡入淡出效果发生之前立即出现或消失。
Example HTML:
示例 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>
Example JS:
示例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');
});
});
回答by Zane
Any reason not to just use jQuery for the fadeIn effect? Below is some code to make the fade in effect with jQuery.
有什么理由不只是使用 jQuery 来实现淡入淡出效果？下面是一些使用 jQuery 使淡入效果的代码。
Removed "fade" class
删除了“淡入淡出”类
<div id="yellow-box" class="hide">
<p>I'm yellow</p> </div>
Updated jQuery for fade in
更新了用于淡入的 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');
});
});
回答by Seth Kingsley
This is very old, but in case anyone else gets here, the answer is to use a single-shot handler for the synthetic event bsTransitionEnd.
这是非常古老的，但如果其他人到达这里，答案是对合成事件使用单次处理程序bsTransitionEnd。
example:
例子：
$(".alert").one('bsTransitionEnd',function() {
$(this).addClass('hide');
});
window.setTimeout(function(){
$(".alert").removeClass('in');
},1000);
