使用Bootstrap 3淡入动态生成的内容 [英] Fade in dynamically generated content with Bootstrap 3

问题描述

我已阅读几个 问题，但似乎没有一个能解决我的问题

I've read several similar questions on SO regarding Bootstrap's fade classes, but none of them seem to address my issue.

我了解到，在将.in类添加到已经具有.fade类的元素时，Bootstrap 3中的淡入淡出动画可以通过在0和1之间切换opacity来工作.当处理HTML中已经存在的元素(例如，此JS Fiddle演示).

I understand that the fade animation in Bootstrap 3 works by switching opacity between 0 and 1 when you add the .in class to an element that already has a .fade class. This works fine for me when dealing with an element that already exists in the HTML (for example, this JS Fiddle demo).

问题是当使用Javascript动态创建元素时，过渡似乎没有发生.例如，以下代码将创建并显示警报，但CSS过渡不会发生(在Chrome和Firefox中都经过测试).如果在开发工具中手动添加和删除in类，则淡入淡出效果很好:

The problem is that the transition doesn't seem to happen when the element is created dynamically with Javascript. For example, the following code will create and display an alert, but the CSS transition doesn't happen (tested in both Chrome and Firefox). If I manually add and remove the in class in Dev Tools, the fade works fine:

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

.addClass()函数显然可以正常工作，因为警报获得了in类并显示了该警报，但是没有发生过渡.知道如何使它工作吗?

Clearly the .addClass() function is working because the alert gets the in class and is displayed, but the transition doesn't happen. Any idea how I can get it to work?

有关可编辑的演示，请参见这支笔在CodePen上.

For an editable demo, see this pen on CodePen.

推荐答案

您看到的问题是，当浏览器呈现元素时，您已经添加了"transition"类.添加元素直到需要时才将其渲染.使用起始值"渲染元素并设置了过渡css属性(来自初始"类)后，您就可以添加其他类来触发动画了.在添加其他类之前，您需要浏览器呈现初始状态，否则就没有动画可以来自"动画，并且它以其完整的过渡值出现.

The problem you are seeing is that by the time the browser renders the element, you have already added the "transition" class. Adding an element doesn't cause it to be rendered until it needs to be. Once an element has been rendered with the "starting value" and also has the transition css property set (from the "initial" classes), you can then add the other class to trigger your animation. You need the browser to have rendered the initial state before you add the other class or there is nothing to animate "from" and it comes in at it's full transition value.

您可以尝试从类似width的元素中读取一个值，该值应在添加其他类之前强制重新绘制:

You might try reading a value from that element like width which should force a repaint before you add the other class: http://codepen.io/anon/pen/hGrFe

如果您打算采用安东尼的方法，我建议您使用requestAnimationFrame而不是setTimeout，因为这样可以保证在重新绘制之后(假设浏览器支持raf).

If you were going to take anthony's approach, I would suggest using requestAnimationFrame instead of setTimeout as that is guaranteed to be after a repaint has happened (assuming browser support for raf).

要避免重复，可以在jQuery上编写自己的repaint方法:

To save some repeating yourself, you could write your own repaint method on jQuery:

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');

这篇关于使用Bootstrap 3淡入动态生成的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！