带动画的CSS下拉菜单（无js） [英] CSS Dropdown menu with animation (no js)

问题描述

尝试使用CSS动画（没有任何JS）创建动画下拉菜单。以为我一直在吠叫正确的树，但看不到我要去哪里，对于这个简化的菜单项...

Trying to create an animated dropdown menu using CSS animation, without any JS. Thought I've been barking up the right tree but can't see where I'm going wrong, for this simplified menu item...

<div class="menu">Menu Item
    <ul>
        <li>Dropdown 1</li>
        <li>Dropdown 2</li>
        <li>Dropdown 3</li>
        <li>Dropdown 4</li>
        <li>Dropdown 5</li>
    </ul>
</div>

以及以下CSS；

.menu ul {
    height: 0px;
    overflow: hidden;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.menu:hover ul {
    height: auto;
}

这种想法应该会成功导致div向下滚动，但这仅仅是不断出现。有什么想法吗？欢呼声

Thought that should successfully result in a scroll down of the div, but it just keeps appearing. Any thoughts? Cheers

推荐答案

请参阅以下主题以供参考：如何转换高度：0;达到高度：自动；使用CSS？

See this topic for reference: How can I transition height: 0; to height: auto; using CSS?

简单地说，您不能为 height：auto; 设置动画。不支持。如果您具有预定的固定高度，则可以通过设置该特定值的动画来实现。例如，从0像素到100像素。

To put it simply, you can not animate to height: auto;. It is not supported. If you have a pre-determined, fixed height, you can do it by animating to that specific value. 0px to 100px for instance. Auto however is not supported.

上面链接中的第一个答案链接到另一篇文章，给出了一种解决方法。您可以在网站上进行探索。

The first answer in the link above links to another article in which a sort of work-around is given. You may explore that for implementation on your site.

可以使用CSS3将height：0转换为内容的可变高度吗？

这篇关于带动画的CSS下拉菜单（无js）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！