jquery - 使用 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);

哎呀，我什至可以将它抽象为一个实用函数并完成它。但是我有一个过度好奇(和迂腐)的部分，想知道这个 hack 是否有必要，或者我是否遗漏了一些东西。有没有人看到这样做的更好和非 hacky 感觉的方式？

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

Answer 1

保持原样可见，但使用 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>