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

Question

我已阅读 several similar questions关于 Bootstrap 的 fade 类，但它们似乎都不能解决我的问题。

据我所知，Bootstrap 3 中的淡入淡出动画是通过在添加 .in 时在 0 和 1 之间切换 opacity 来实现的 类到已经具有 .fade 类的元素。当处理 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 属性(来自“初始”类)，您就可以添加其他类来触发动画。您需要浏览器在添加其他类之前呈现初始状态，否则没有任何内容可以“从”设置动画，并且它会以完整的转换值出现。

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

如果您打算采用 anthony 的方法，我建议使用 requestAnimationFrame 而不是 setTimeout 因为这保证是在重绘发生之后(假设浏览器支持英国皇家空军)。

为了避免重复，您可以在 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');