javascript - CSS变换高度不起作用

Question

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

这是我要制作动画的小提琴。

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;到ul您的小提琴中。

改用transform: scaleY(0);！

Answer 2

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

您可以使用

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

或者您也可以使用max-height：

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

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