Running CSS3 transition with class addition with jQuery

Question

I currently have a running fiddle in which I am trying to get a css3 opacity transition to run when I add a class to it. The main setting is that I press the button, and then through jquery add a div to dom, and after adding this element to dom, I add a class to it. Adding a class to this new dom element involves starting my transition, but it’s not, the only thing that happens is that the element is displayed, but the opacity transition does not work. Any help would be greatly appreciated, I leave a link to the violin here is a link to the violin . And yes, I know that I can only make attenuation using jquery, but this is just an experiment, which will probably be used to trigger another css transition, and then opacity

Answer 1

I ran into this problem before, the only workaround I found was to add setTimeout so that the DOM would notice a new element there. It can be zero ms, and it will still work:

$('button').live('click', function() { $(this).after("<div class='fade'>This is just a test</div>") setTimeout(function(){$(".fade").addClass("in");}, 0) }); 

http://jsfiddle.net/tfmFx/

Answer 2

I don't think CSS3 transitions are supported by dynamically generated elements. I tried changing your sample by placing the div directly in the HTML, and the transitions worked fine. You may have to live with this as a workaround until browser support improves.