CSS3 Transitions with toggleClass

Question

I have the -webkit-transition-duration property set on a div, whose height is set by another class. When I use jQuery to toggle the class, it the transition does something funky.

It goes all the way up, and then is set to the proper height instead of just moving from 50px height to automatic height which is what I expect it to do. What's the fix for this?

Here is a demo: http://jsfiddle.net/XcFxQ/1/

Answer 1

This works:

http://jsfiddle.net/Eric/XcFxQ/2/

Although the height is not strictly auto. It manually sets the height in order to make it animate.

Answer 2

I was able to get it to work correctly without -webkit-transition-property and instead using jQuery 1.7 with jQuery UI as in this fiddle:

http://jsfiddle.net/pjFAt/

In my testing, this produced the cleanest, most robust results.

Now, I'm not sure if you're keen on including jQuery UI in your webpage. If not, it's my best guess that you might have to work around the rendering flaws using some more Javascript (ie. if hasClass, then animate, etc...)