CSS flexible-height "slideUp" transition

Question

A common approach for making a SlideUp transition is the following:

.cssSlideUp {
    transition: .5s linear all;
    height: 80px;
    overflow: hidden;
}
.cssSlideUp.hide {
    height:0;
}

This approach requires the element to have a fixed height (80px).

What approach allows me to have the same effect but with a flexible height?

Update:

This works, but I'm still not satisfied. The max-height:400px property still fixes the height on a specified number, and doing max-height:9999px to make it "infinite" will make the transition unnoticeable:

.cssSlideUp {
    transition: .5s linear all;
    height: auto;
    max-height: 400px;
    overflow: hidden;
}
.cssSlideUp.ng-hide {
    max-height: 0px;
}

Update 2:

A scale transform works well, but I'm still not satisfied, since it won't push/pull the elements below:

.cssSlideUp {
    transition: .5s linear all;
    transform: scaleY(1);
    transform-origin: top;
    overflow: hidden;
}
.cssSlideUp.ng-hide {
    transform: scaleY(0);
}

possible duplicate of [CSS transition height: 0; to height: auto;](http://stackoverflow.com/questions/3508605/css-transition-height-0-to-height-auto) — sp00m, Jun 02 '14 at 15:15

score 1 · Answer 1 · answered Jun 02 '14 at 15:34

Aside from the already referenced implementations, you can also use a negative top margin combined with a container. However it suffers from the problem of margins being bound to width, not height, resulting in an unpercise animation and other implied complications.
Sample implementation is as follows: Jsfiddle sample

HTML:

<h1>Previous content</h1>
<p>This is content before the animation.</p>

<div class="container">
    <div class="scroll">
        <h1>Hover anywhere to scroll up</h1>
        <p>We have some content here.</p>
        <p>But no one can be quite sure just how large this content is.</p>
    </div>
</div>

<h1>Later content</h1>
<p>This is content after the animation.</p>

CSS:

.container {
    overflow: hidden;
    position: relative;
}

.scroll {
    transition: .5s linear all;
}

body:hover .scroll {
    margin-top: -100%;   
}

score -2 · Answer 2 · answered Jun 02 '14 at 15:15

Unfortunately, nothing currently without JavaScript. Transitions require a known start and end point.

With JS you cannot check the height of an element that is not displayed because non-displayed elements have no layout. You need to clone or position the element you want the height of off the screen.

This technique is used by jQuery Actual.

There is alternatively a slight misappropriation of CSS available by setting the max-height of the target element and transitioning that but that's brittle.

CSS flexible-height "slideUp" transition

Update:

Update 2:

2 Answers2