Fade in dynamically generated content with Bootstrap 3

Question

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

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).

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

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?

For an editable demo, see this pen on CodePen.

@zessx why was this re-tagged with `twitter-bootstrap-2`? I suppose there's not much difference between 2 and 3 related to this topic, but I'm definitely using 3. — Michael Martin-Smucker, Jan 06 '14 at 13:40
You're right, my re-tag was too quick, and based on the linked JSFiddle. I removed [tag:twitter-bootstrap-3] as the framework version doesn't influence the result. — zessx, Jan 06 '14 at 13:47

score 2 · Answer 1 · edited May 23 '17 at 11:59

2

Try changing your javascript to something like this:

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

Here's some further reading that explains what's going on.

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

Why is setTimeout(fn, 0) sometimes useful?

edited May 23 '17 at 11:59

Community

1
1

answered Jan 06 '14 at 05:41

antony

2,763
19
23

Thanks, that has been helpful reading. I'm still not completely sure I understand, though. Does the chained `addClass()` happen before the browser finishes painting the newly added element? And `setTimeout(fn, 0)` makes it wait until the repaint is finished? – Michael Martin-Smucker Jan 06 '14 at 14:10
1

Though less standard than `setTimeout` -- `requestAnimationFrame` more accurately represents what needs to happen - There needs to be a render of the element between initially adding the element and adding the second class in order to see the transition. – gnarf Jan 06 '14 at 19:39

gnarf · Accepted Answer · 2014-01-06T20:12:29.513

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.

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

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).

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

Fade in dynamically generated content with Bootstrap 3

2 Answers2

Linked