首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >Bootstrap:如何使用默认的' fade ',' hide ','in‘类淡出然后隐藏一些东西?

Bootstrap:如何使用默认的' fade ',' hide ','in‘类淡出然后隐藏一些东西?
EN

Stack Overflow用户
提问于 2013-05-30 14:36:46
回答 2查看 96.7K关注 0票数 9

Bootstrap显然使用了'hide','fade‘和'in’类来进行转换。

我遇到的问题是,使用“淡入”和“淡入”会将不透明度从0更改为1。过渡效果很完美,但内容仍然存在,即使你看不到它,也会占用页面空间。例如,如果它的容器有一个边界,那么在边界之前会有一个很大的空白区域。

我想通过添加和删除'in‘类来利用它们现有的CSS转换,但我也希望隐藏任何淡出的元素,但只有在转换结束之后。所以基本上,他们在模式中做了什么,但我不知道他们是如何做到的。

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

JS fiddle here

示例HTML:

代码语言:javascript
代码运行次数:0
运行
复制
<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:

代码语言:javascript
代码运行次数:0
运行
复制
$(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');
    });
});
EN

回答 2

Stack Overflow用户

发布于 2013-05-30 16:15:40

有什么理由不只使用jQuery来实现fadeIn效果吗?下面是一些使用jQuery实现淡入淡出效果的代码。

Fiddle here

删除“淡入淡出”类

代码语言:javascript
代码运行次数:0
运行
复制
<div id="yellow-box" class="hide">
<p>I'm yellow</p> </div>

已更新淡入的jQuery

代码语言:javascript
代码运行次数:0
运行
复制
$(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');     
  });

});
票数 13
EN

Stack Overflow用户

发布于 2015-10-06 19:28:48

这是非常古老的,但如果其他人到达这里,答案是使用合成事件bsTransitionEnd的单发处理程序。

示例:

代码语言:javascript
代码运行次数:0
运行
复制
$(".alert").one('bsTransitionEnd',function() {
    $(this).addClass('hide');
});
window.setTimeout(function(){
    $(".alert").removeClass('in');
},1000);
票数 7
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/16829509

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档