Slide-in CSS3 animation with height: auto

I want my block element to appear as if the height was growing up to its maximum (like JQuery's progressive show), vertically "pushing" any element after it smoothly as it grows.

It's easy with fixed height (make max-height go from 0 to wanted size), but not with height: auto, for you can't make max-height go from 0 to none (the element would be 0px high all along then suddenly appear at 100% of the animation).

I've tried ranging transform from scaley(0) to scaley(1) but the heig开发者_如何学JAVAht is automatically "reserved" from the beginning of the transition (so the content after the inserted element is brutally shifted down instead of smooth, progressive pushing).

You can use a "pusher" element (or pseudo element) before any content.

<div class="container open">
    <div class="pusher"></div>
    ... the rest of the unknown height content
</div>

Then transition the pusher's margin.

.container { overflow:hidden }
.pusher { margin-top:-100%; transition:margin-top .5s ease; }
.open .pusher { margin-top:0%; }

The solution is to individually transform all the elements that are supposed to be moving (aka add another transform to the content that's after the element). Generally, you can't rely on automatic reflow with transforms.

Michael is right, any thing apply an 'auto' value to will not animate cleanly. You have to set defined height. I've made some changes to Duopixel's jsfiddle here: http://jsfiddle.net/joshvogt/vjXuH/

If you want to height to be perfect for each element you'll have to apply classes to each element and specify a height for each. The link sets the height for the largest element.

It seems like the best solution to emulate height: auto; may be to animate max-height instead. I've updated DuMaurier's fiddle and it seems to be working: http://jsfiddle.net/8JLKA/1/

I started with max-height set to the default and then transitioned it on :hover to something much greater than the box would ever need, 500px. This is my first time messing with CSS transitions so I may be missing something crucial.

Update: Okay, I'm going to leave this but it's mostly a bad idea. The problem is that the transition time is linked to the full value of max-height and so, unless the actual height of the contents is very close to the value of max-height the animation will appear to happen way too quickly. Weirdly, when moving away from high max-height the transition takes the expected amount of time. Not sure why this is. Also, the easing will not appear correctly either.

Another technique is used by Responsive Nav, it uses JavaScript to compute the target height, then creates a transition of max-height from 0 to the resulting value.

Code here.