javascript - CSS转换高度不起作用

我正在尝试为元素的height属性设置动画，由于某种原因，它根本没有动画。

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);​

有什么我想念或忘记的东西吗？

最佳答案

我认为如果height是自动的，即没有明确设置，就不能设置动画。只需在小提琴中将height: 50px;添加到ul中即可。

请改用transform: scaleY(0);！