Trigering a CSS3 Transition with adding a class with Jquery

Question

At the moment I have a running fiddle that I am trying to get a css3 opacity transition to fire off when I add a class to it. The basic set up is that I click a button and then through jquery I add a div to the dom and after I add that element to the dom I then add a class to it. The adding class to that new dom element is suppose to kick off my transition but it is not, the only thing that is happening is that the element is being showed but the opacity transition isnt working. Any help will be much appreciated, I am leaving a link to the fiddle here fiddle link .And yes I know i could do the fade in with just jquery, but this is just a experiment , that would probably be used to kick off other css transition other then opacity

It does indeed only seem to work if the class is predefined...adding it dynamically will not execute the transition. Maybe this is still a bug to be solved. — Bas Slagter
– Bas Slagter, Commented Oct 10, 2011 at 15:28
Thats what i was thinking to, but is till find it hard to believe that this has not been noticed by chrome or firefox dev's — Lawrence
– Lawrence, Commented Oct 10, 2011 at 15:39

methodofaction · Accepted Answer · 2011-10-11 01:32:37Z

9

I have encountered this problem before, the only workaround I've found is adding a setTimeout to let the DOM notice there's a new element. 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/

answered Oct 11, 2011 at 1:32

methodofaction

72.7k22 gold badges158 silver badges166 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

BinaryTox1n Over a year ago

Well that is really annoying. Thanks for the solution.

daGUY · Accepted Answer · 2011-10-10 15:54:54Z

0

I don't think CSS3 transitions are supported on dynamically created elements just yet. I tried modifying your sample by placing the div directly in the HTML, and the transitions worked fine. You might have to live with that as a workaround until browser support improves.

answered Oct 10, 2011 at 15:54

daGUY

29k29 gold badges78 silver badges124 bronze badges

Collectives™ on Stack Overflow

Trigering a CSS3 Transition with adding a class with Jquery

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related