使用CSS将手风琴从小高度转换为全高度

Question

我正在构建一个手风琴列表，我希望它使用CSS -webkit-transition：来打开和关闭动画。动画由一个事件处理程序触发，该处理程序只需打开和关闭.open类。问题是，当我点击它时，动画从闭合高度变为0px高度，然后猛然回到全高，而不是平滑地动画到全高。

HTML

<ul class="accordion">
    <li>Foo
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quis leo sit amet justo vulputate volutpat. Suspendisse potenti. Aliquam aliquet justo ut turpis suscipit adipiscing.</p>
    </li>
    <li class="open">Baz
        <p>Ut velit magna, sagittis at blandit accumsan, vestibulum et dolor. Aliquam elit ante, congue vel pharetra ut, ultricies non est. In hac habitasse platea dictumst. Donec velit ligula, sodales a imperdiet non, sagittis id mauris.</p>
    </li>
    <li>Bar
        <p>Cras sit amet gravida lacus. Nulla consequat molestie nunc nec fermentum. Donec lobortis pretium quam sit amet scelerisque.</p>
    </li>
</ul>​

的Javascript

$('.accordion').delegate('li', 'click', function(li){
    $(this).toggleClass('open');
});

的CSS

.accordion li.open{
    -webkit-transition: height 1s;
}

.accordion li:not(.open){
    height: 1em;
    -webkit-transition: height 1s;
}
​

Try it on JSFiddle and see what I mean.

我已经想出如何使其工作，但它需要在.open类上设置一个明确的高度。然而，手风琴具有可变的高度，并且为每个手风琴创建一个明确的选择器是突兀和不可维护的。谁能给我一个比这更好的解决方案？

Here it is working with an explicit height that doesn't fit the content

Answer 1

似乎W3C规范没有提供这种行为（基于this comment和this email thread）。为什么这不在我不知道的规范中，但是围绕这个的唯一方法似乎需要使用javascript（或其他一些确定高度的方法）动态测量对象的高度。您可能会发现this answer对类似的问题很有帮助。

Answer 2

您可以通过将height替换为max-height，将height替换为自动，然后设置您的开放{{1}来排序处理此问题（仅以轻微的hackish方式）比你想要的更大的东西。 （200px，500px等）。

min-height显然会关闭它。

max-height:0会用动画打开它，然而，它不会是完美的，因为它会动画到最大高度，所以如果你的元素实际上只有200px高，你就会错过大部分的动画