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;到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/