CODEWITHSUNDEEP
javascriptjquerycss
qwertymk
qwertymk

Reputation: 35276

css transform height not working

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?

Upvotes: 1

Views: 1726

Answers (2)

dain
dain

Reputation: 6689

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!

Upvotes: 3

Oriol
Oriol

Reputation: 288100

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/

Upvotes: 1

Related Questions