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

Question

带有转换模块的 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);

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

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

Answer 1

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

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

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