CSS - Animate element's height to auto

Question

This seems like a stupid question, but I've been at it for hours, and I can't get this simple thing to work.

I have an element of height 0px.

HTML

<div class="element"> ...content... </div>

CSS

.element {
    height: 0px;
    overflow: hidden;
    transition: height 2s;
}

Then I've got some js that checks when a button is clicked, and adds the class 'animate' to the element.

CSS

.animate {
    height: auto;
}

The problem is, there is no 2 second animation whatsoever like specified in the css.

I tested the same thing, but intead of animating to height: auto;, i've animated it to height: 150px;.

By doing that it works, but I need to use height auto, because the height of the content will vary.

Here is a JSFiddle I've created: https://jsfiddle.net/0ctzc4hv/1/

How would I go about animating the height of the element to auto?

Thanks in advance,

David

You can't animate to `auto`, but you can use `max-height`, where you set it to a value big enough to cover the highest content — Asons, Oct 31 '16 at 17:19
@LGSon @DaniP Thanks! What if the max height is unlimited? Should I just stick in like `100000` or something? — David Callanan, Oct 31 '16 at 17:22
No, an animation like that will most likely not look good, then I recommend using a script to calc the highest one — Asons, Oct 31 '16 at 17:25

score 2 · Answer 1 · answered Oct 31 '16 at 17:19

2

The auto property is not animatable, you can workaround this by animate the max-height property.

answered Oct 31 '16 at 17:19

Bazinga

score 2 · Answer 2 · answered Oct 31 '16 at 17:23

2

Why don't you hide it, then use the jquery to achieve what you want:

Hide the element:

Display: none;

JQuery function:

$('you_element').slideDown();

answered Oct 31 '16 at 17:23

Chihab JRAOUI

2

I would like a pure css solution to this problem. Also if I really had to use javascript, I won't be able to use jQuery for the project I am working on. – David Callanan Oct 31 '16 at 17:24

2 Answers2