CSS轉換不起作用

Question

我試圖創建一次只顯示/隱藏一個菜單的容器系統。它大部分工作，但我無法讓CSS轉換正常工作。我一直在看這幾個小時，不知道爲什麼沒有發生任何轉換。

當點擊一個容器時，菜單需要下拉並向上滾動。我只需要在用戶點擊容器時獲得某種轉換的起點。

CSS：

.singledrop { 
    display: none; 
} 
.singledroplabel h2 { 
    display: inline; 
    color: #4e4e50; 
} 
.singledrop+.content { 
    display: none; 
    height: 0px; 
    transition: height 0.2s ease-in-out; 
    -webkit-transition: height 0.2s ease-in-out; 
    -moz-transition: height 0.2s ease-in-out; 
    -ms-transition: height 0.2s ease-in-out; 
} 
.singledrop:checked+.content { 
    display: block; 
    height: auto; 
} 

HTML：

<div> 
    <label class="singledroplabel" for="drop1"><h2>Foo</h2></label> 
    <input class="singledrop" type="radio" name="menu" id="drop1" /> 
    <div class="content"> 
     foo<br/> 
     foo<br/> 
     foo<br/> 
     foo<br/> 
     foo<br/> 
     foo<br/> 
     foo<br/> 
    </div> 
</div> 
<div> 
    <label class="singledroplabel" for="drop2"><h2>Bar</h2></label> 
    <input class="singledrop" type="radio" name="menu" id="drop2" /> 
    <div class="content"> 
     bar<br/> 
     bar<br/> 
     bar<br/> 
     bar<br/> 
     bar<br/> 
     bar<br/> 
     bar<br/> 
    </div> 
</div> 

Answer 1

你不能動畫到height:auto。嘗試硬編碼高度，或將max-height設置爲巨大。

http://jsfiddle.net/adambiggs/MAbD3/

是最大高度方法的一個很好的例子。