Question

带有过渡模块的Bootstrap 3包含一些实用程序类，用于通过淡入淡出来显示和隐藏元素。当你有一个具有淡入淡出类的元素时，它的不透明度为0.然后当你在＆＃34;中添加类＆＃34;对它来说，它的不透明度为1。

问题在于元素不是display:none，因此占用空间。

Bootstrap还包括实用程序类＆＃34; hide＆＃34;它为你做display:none部分。以下是HTML中完全隐藏元素的示例，使用这些实用程序类：

<div id="sample" class="hide fade">
  Originally hidden and faded out, then shown and faded in
</div>

理论上你应该能够取消隐藏（转换为阻止）然后淡入，如下所示：

$('#sample').removeClass('hide').addClass('in');

然而，这不起作用。关于浏览器的内部时间有一些问题。我不确定是什么。最终结果是显示了元素，但没有淡入淡出动画。或者至少在Chrome中;我承认我没有测试过其他浏览器，因为无论如何这都需要在Chrome中运行。

现在，我有一个解决方案。我推迟添加＆＃39;短暂的一刻。这使它适当地工作：

var $sample = $('#sample');
$sample.removeClass('hide');
setTimeout(function() {$sample.addClass('in')}, 100);

哎呀，我甚至可以将它作为一个实用函数抽象出来并完成它。但是我的过于好奇（和迂腐）的部分会想知道这个黑客是否有必要，或者我是否遗漏了某些东西。有没有人看到这样做的更好和非黑客感觉？

这里是一个jsfiddle（一些标记更改以同时允许两个测试用例）：https://jsfiddle.net/pmd6ow7r/

Answer 1

您无法为display：none项设置动画，因为它已被解析引擎忽略。您可以做什么而不是超时功能不是使用display：none，而是隐藏高度为0的元素，如小提琴中所示 https://jsfiddle.net/pmd6ow7r/3/

所以基本上你不使用hide bootstrap类并使用你的自定义让我们说自定义隐藏

.custom-hide {
   height:0;
   overflow:hidden;
}

Answer 2

使它保持可见状态，但使用jQuery隐藏它...

<script>
    $(function() {
        $("#sample")
            .hide() // hides it first, or style it with 'display: none;' instead
            .fadeIn(300) // fades it in
            .delay(3260) // (optionally) waits
            .fadeOut(300); // (optionally) fades it out
    });
</script>

使用Bootstrap显示然后淡化元素

2 个答案: