Bootstrap：如何使用默认的 'fade'、'hide'、'in' 类来实现淡出并隐藏某个东西？

Question

Bootstrap显然使用“hide”、“fade”和“in”类来实现转换效果。

我的问题是，使用“fade”和“in”会将不透明度从0变为1。过渡效果很完美，但即使您看不到它，内容仍会占据页面上的空间。例如，如果它的容器有一个边框，在边框之前会有一个大的白色空间。

我想利用他们现有的CSS转换通过添加和删除“in”类实现，但我也希望正在淡出的任何元素在过渡结束后被隐藏，而不是立即消失。因此，基本上就是他们在模态框中所做的事情，但我不知道他们是如何做到的。

在下面的示例中，添加或删除“hide”意味着div会在淡入淡出效果发生之前立即出现或消失。

JS fiddle链接

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

- davidpauljunior

---

可以尝试使用类似于https://dev59.com/u2sz5IYBdhLWcg3wxat3#13257654的超时，也可以参考http://bootply.com/62589。 - Bass Jobsen

我最终使用了超时，谢谢。 - davidpauljunior

现在您可以不使用JavaScript或Jquery来实现这个效果。 - Liam

这个回答解决了你的问题吗？使用CSS实现页面加载时的淡入效果 - Liam

Answer 1

有没有任何理由不使用jQuery实现淡入效果？以下是一些使用jQuery实现淡入效果的代码。

这里是示例

移除了"class"为"fade"

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

});

- Zane

---

在现代浏览器中（至少到2020年），这不是实现此目的的最佳方法。纯CSS过渡，就像@maarten-von-middelaar的答案中所述。 - Jay Day Zee

Answer 2

这是一个很老的问题，但如果有其他人来到这里，答案是使用单次处理程序来处理合成事件bsTransitionEnd。

例如：

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

- Seth Kingsley

---

感谢您的示例，@maarten-van-middelaar！ - Seth Kingsley