10

Bootstrap 显然使用 'hide'、'fade' 和 'in' 类进行转换。

我遇到的问题是使用 'fade' 和 'in' 会将不透明度从 0 更改为 1。过渡效果是完美的，但内容仍然占用页面空间，即使你不能看见。例如，如果它的容器有边框，那么边框前会有一个很大的空白。

我想通过添加和删除“in”类来利用他们现有的 CSS 过渡，但我也希望隐藏任何淡出的元素，但只有在过渡结束后才能隐藏。所以基本上，他们在模态中做了什么，但我不知道他们是怎么做的。

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

JS小提琴在这里

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

2 回答 2

13

有什么理由不只使用 jQuery 来实现淡入淡出效果？下面是一些使用 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');     
  });

});
于 2013-05-30T08:15:40.090 回答
7

这是非常古老的，但万一其他人来到这里，答案是对综合事件使用单次处理程序bsTransitionEnd。

例子：

$(".alert").one('bsTransitionEnd',function() {
    $(this).addClass('hide');
});
window.setTimeout(function(){
    $(".alert").removeClass('in');
},1000);
于 2015-10-06T11:28:48.233 回答