css transform height not working

Question

I'm trying to animate the height property of an element and for some reason it isn't animating at all.

Here's the fiddle where I'm trying to animate.

HTML

<ul>
    <li>
        li 1
    </li>
    <li>
        li 2
    </li>
    <li>
        li 3
    </li>
</ul>

Css

ul.hide {
    height: 0px;
    overflow: hidden;
}
ul {
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}

JS:

setTimeout(function () { $('ul').addClass('hide'); }, 2000);
setTimeout(function () { $('ul').removeClass('hide'); }, 4000);

Is there something I'm missing or forgetting about?

what are you trying to do? are you trying to get the UL to slowly lose height as it disappears? — jeremy, Sep 09 '12 at 01:50
@Nile pretty much, I'm trying to do the equivalent of jquery's `slideToggle()` in css3 transitions. — qwertymk, Sep 09 '12 at 01:51
well when you add `display: none` it completely makes the element disappear... use `overflow: hidden;` — jeremy, Sep 09 '12 at 01:56
@qwertymk Why don't you want to use `slideToggle` but you use jQuery in order to get the element? Are you using jQuery or not? — Oriol, Sep 09 '12 at 02:01
Possible duplicate of http://stackoverflow.com/questions/3508605/css-transition-height-0-to-height-auto — Oriol, Sep 09 '12 at 02:02
@Oriol No, I'm just using it in the fiddle for demo purposes — qwertymk, Sep 09 '12 at 02:08

score 3 · Accepted Answer · answered Sep 09 '12 at 01:57

3

I don't think you can animate height if it's automatic, ie if you're not setting it explicitly. Just try adding height: 50px; to ul in your fiddle.

Use transform: scaleY(0); instead!

answered Sep 09 '12 at 01:57

dain

6,475
1
38
47

score 1 · Answer 2 · answered Sep 09 '12 at 01:57

See http://jsfiddle.net/uJCQV/1/

You can use

$('ul').css('height',$('ul').height())
setTimeout(function () {$('ul').addClass('hide');}, 2000);
setTimeout(function () { $('ul').removeClass('hide'); }, 4000);

Or you can also use max-height:

ul.hide {
    max-height: 0px;
    overflow: hidden;
}
ul{max-height:999px;}

http://jsfiddle.net/uJCQV/2/

css transform height not working

2 Answers2