javascript - css 变换高度不起作用

Question

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

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

我是否遗漏或忘记了什么？

Answer 1

我不认为如果 height 是自动的，即如果你没有明确设置它，你就不能为它设置动画。只需尝试将 height: 50px; 添加到您的 fiddle 中的 ul。

改用transform: scaleY(0);!