将元素添加到dom并使用jquery应用类不会应用css3转换

Question

First, my demo is here: JsFiddle .

I'm trying to add an element to the dom with jquery and then make it do some css3-transition animations. I'm not sure why it doesn't work the first time it's appended. I click the button and it appends but when I addClass to the div it doesn't animate it. It simply just applies the css without animations.

Any idea of why this doesn't work for the div.addClass('test') right after the element is appended?

May be the same as Trigering a CSS3 Transition with adding a class with Jquery

But I'm curious if there was any new solutions to it. That one didn't seem to really get answered.

Answer 1

The suggestion from your article seems to somewhat work, i see your commented out code and it looked like the timeout needed to be lower or it needed to be applied with the class selector and not the variable / div. Really no idea why it works, I just fiddle.

I changed a line in your fiddle to reflect the suggestion from that article.

setTimeout(function(){$('.article').addClass('test').removeClass('test2');}, 0)