No animation with div elements created via Javascript.

[CaudellDev]

When I create a div element with HTML and use move functions on it, it works just fine. However, when I use Javascript to create and element ( = document.createElement('div')), and set the class and Id, it won't animate with the move functions. It just jumps to the end position, even if I have the duration set.

[CaudellDev]

Anyone else have this problem? I don't want to rely on only pre-defined divs, it would be much easier if I could make divs on the fly and animate them as well.

[mdgriffith]

I think I'm having the same issue. A hack I found that worked(though is obviously not what I want to keep around in my code) was to wrap the animation in a setTimeout with a wait of 1ms.

var anim = function() {
    move(elem)
             .set('left','120px')
             .duration(700)
             .end();
}
setTimeout(anim, 1);

[garethfoote]

I'm also experiencing this same issue and the workaround suggested by @mdgriffith is also working, although not ideal.

[ben-eb]

+1

[mdgriffith]

It looks like the important part is forcing the layout, or waiting until its done automatically

After creating the element, requesting a property from it that requires a layout, like elem.clientHeight, should do the trick, though still a bit hackish.

http://stackoverflow.com/questions/12088819/css-transitions-on-new-elements