CSS3 transition to height auto goes to height 0 first

Question

I have the following CSS:

.foo
{
    height:100px;
    overflow:hidden;
    -webkit-transition: height 200ms;
    -moz-transition: height 200ms;
    -o-transition: height 200ms;
    transition: height 200ms;
}

.foo.open
{
    height:auto;
}

When .foo has an auto height, it will be a height of ~550px depending on the content.

I add the class open using jQuery, and I would expect to see the height change from 100px to ~550px in 200ms using CSS3 transitions.

However what exactly happens is that the height changes from 100px to 0px, then jumps to ~550px.

-- See Live Demo --

If I instead change .open to height:550px then this works fine, however the content length will vary and therefore I need to set the height to auto, and not a fixed pixel height.

Why is the div closing instead of sliding to ~550px, and how can I resolve this animation issue?

Answer 1

I don't think you can transition to height: auto; with css transitions. A workaround, which isn't perfect is to transition max-height instead and set it to something greater then it will ever get. Depending on what value you set it to will have a effect on the transition speed, but I've set it to max-height: 1000px; for the sake of simplicity.

Here's a demo to show you what I mean.

Code from demo:

.foo
{
    max-height:100px;
    overflow:hidden;
    -webkit-transition: max-height 200ms;
    -moz-transition: max-height 200ms;
    -o-transition: max-height 200ms;
    transition: max-height 200ms;
}

.foo.open
{
    max-height:1000px;
}

It's not an elegant solution, but I hope it helps.