使用 Bootstrap 显示然后淡入淡出元素答案

【问题标题】：Show and then fade element with Bootstrap使用 Bootstrap 显示然后淡入淡出元素
【发布时间】：2015-12-29 23:19:17
【问题描述】：

带有过渡模块的 Bootstrap 3 包括一些实用程序类，用于通过淡入淡出动画显示和隐藏元素。当您有一个具有淡入淡出类的元素时，它的不透明度为 0。然后，当您向其中添加“in”类时，它的动画将不透明度设置为 1。

这样做的问题是元素不是display:none，所以占用空间。

Bootstrap 还包括实用程序类“hide”，它为您执行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 中运行。

现在，我确实有一个解决方案。我将“in”的添加延迟了片刻。这会使其正常工作：

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

哎呀，我什至可以将它抽象为一个实用函数并完成它。但是我有一个过度好奇（和迂腐）的部分，想知道这个 hack 是否有必要，或者我是否遗漏了一些东西。有没有人认为这样做更好、更不乏味？

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

【问题讨论】：

标签： jquery twitter-bootstrap

【解决方案1】：

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

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

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

【讨论】：

我喜欢它并会试一试。但是，动画不是 display:none 。这是不透明度。哪个可以动画，如我提供的小提琴所示。从理论上讲，该链完全删除了 display:none（将其保留为 display:block），然后为不透明度设置动画。不显示值。理论上它是可行的，过去的一些讨论建议使用确切的链，但发生了一些变化，导致某种意外的内部竞争条件（或其他东西）导致链失败。
Opacity 可以动画，但是当 dom 元素为 display:none 时，它根本不会被渲染，因此它的任何属性都不能动画，因为它们不存在。当你让它显示：块它需要更多的时间来呈现比你的脚本需要添加类。所以动画失败了。
^^ 有道理，古拉米！唉，该技术本身不起作用，因为容器的高度为 0 并不能阻止内容占用空间。
或者我应该说——该技术不是万能的。使用普通的 div 似乎可以工作。我的“隐藏”区域包含各种形式的内容，不知何故，它的某些格式使得容器不会隐藏。有各种元素（表单、标签）具有各种类型的显示（表格）和其他设置（框大小）。我还没有确定究竟是哪个导致了布局，但只要说容器的高度确实为 0 但内容占用空间就足够了。
你应该让overflow:hidden到height:0，不好意思我忘了说，这样如果容器是height:0，里面的内容就不能占空间了；这样，它就成为唯一适合显示器的解决方法：据我所知没有问题

【解决方案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>

【讨论】：