相关疑难解决方法(0)

Bootstrap显然使用'hide','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');
    });
});

我在我的网站上使用的动画(为iOS开发)有一个简单的淡入淡出和淡出使用jQ:

$('.loading').fadeOut();

然而,iPhone在运行这些动画时不稳定.然而,CSS3动画工作得更顺畅.我如何淡出div使用jQuery,但使用CSS3动画而不是jQ？

我正在使用Bootstrap警报,我尝试了多种方法使它们淡出,但它没有用.这是代码:

<div class='col-sm-7 alert alert-success' id='alrt' role='alert'>
<i class='fa fa-check fa-fw'></i>
<b>Etudiant ajouté avec succés</b>
</div>

打开页面时,警报会自动显示.