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/

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