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/