0

我正在构建一个手风琴列表，我希望它使用 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;
}
​

在 JSFiddle 上尝试一下，看看我的意思。

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

在这里，它使用不适合内容的显式高度

4

2 回答 2

0

您可以通过替换height为max-height，将其保留height为自动，并将您的开放设置min-height为比您需要的更大的东西来处理这个问题（以一种稍微有点骇人听闻的方式）。（200 像素、500 像素等）

max-height:0显然会关闭它。

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

于 2013-04-24T20:40:38.610 回答
0

W3C 规范似乎没有提供这种行为（基于此评论和此电子邮件线程）。为什么这不在我不知道的规范中，但解决这个问题的唯一方法似乎需要使用javascript（或其他一些确定高度的方法）动态测量对象的高度。您可能会发现这个对类似问题的回答很有帮助。

于 2012-12-02T05:43:16.810 回答