使用 Bootstrap 3 淡入动态生成的内容

Question

我已经阅读了关于 Bootstrap 的 fade 类的several similar questions SO，但它们似乎都没有解决我的问题。

我知道，当您将 .in 类添加到已经具有 .fade 类的元素时，Bootstrap 3 中的淡入淡出动画通过在 0 和 1 之间切换 opacity 来工作。在处理 HTML 中已经存在的元素（例如，this JS Fiddle demo）时，这对我来说很好。

问题在于，当使用 Javascript 动态创建元素时，似乎不会发生转换。例如，以下代码将创建并显示警报，但不会发生 CSS 转换（在 Chrome 和 Firefox 中测试）。如果我在开发工具中手动添加和删除 in 类，淡入淡出效果很好：

$('<div class="alert fade">This is a test</div>')
  .appendTo($someElement)
  .addClass('in');

显然.addClass() 函数正在工作，因为警报获取in 类并显示，但没有发生转换。知道如何让它工作吗？

有关可编辑的演示，请参阅this pen on CodePen。

Answer 1

您看到的问题是，当浏览器呈现元素时，您已经添加了“transition”类。添加元素不会导致它在需要时被渲染。一旦使用“起始值”渲染元素并且还设置了过渡 css 属性（来自“初始”类），您就可以添加另一个类来触发动画。在添加其他类之前，您需要浏览器呈现初始状态，否则没有任何东西可以为“from”设置动画，并且它以完整的转换值出现。

您可以尝试从该元素中读取一个值，例如 width，它应该在添加其他类之前强制重新绘制：http://codepen.io/anon/pen/hGrFe

如果您打算采用 anthony 的方法，我建议您使用 requestAnimationFrame 而不是 setTimeout，因为这可以保证在重绘发生之后（假设浏览器支持 raf）。

为了避免重复，您可以在 jQuery 上编写自己的 repaint 方法：

jQuery.fn.repaint = function() {
    // getting calculated width forces repaint (hopefully?!)
    this.width();
    // return chain
    return this;
};

// then later:
$('<div class="alert fade">This is a test</div>')
    .appendTo($someElement)
    .repaint()
    .addClass('in');

Answer 2

尝试将您的 javascript 更改为以下内容：

var $alert = $('<div class="alert alert-success fade out">Why does this box not fade in?</div>');

$('#container').append($alert);

window.setTimeout(function () {
    $alert.addClass('in');
}, 0);

这里有一些解释正在发生的事情的进一步阅读。

http://ejohn.org/blog/how-javascript-timers-work/

Why is setTimeout(fn, 0) sometimes useful?