7

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

<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 向下滚动，但它只是不断出现。有什么想法吗？干杯

4

4 回答 4

11

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

简单地说，你不能为height: auto;. 不支持。如果您有一个预先确定的固定高度，您可以通过为该特定值设置动画来实现。例如 0px 到 100px。但是不支持自动。

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

你可以使用 CSS3 从 height:0 过渡到内容的可变高度吗？

于 2013-05-07T14:38:39.153 回答
4

您不能将 CSS 转换与, 一起使用height:auto，只能与特定值一起使用。

.menu:hover ul {
    height: 100px;
}

http://jsfiddle.net/mblase75/cWZMu/

于 2013-05-07T14:39:02.560 回答
4

下拉动画可以用纯 CSS 实现：

ul {
  overflow: hidden;
  transition: all .3s ease;
}

ul.folded {
  max-height: 0;
}

ul.unfolded {
  max-height: 300px; //value of max-height should always bigger than actual sum of all li's height
}
于 2016-09-05T03:32:35.160 回答
0

我能够构建一个类似于@artcher 的解决方案，但我使用max-height: 100%;了并且效果很好：

ul.submenu {
  overflow: hidden;
  transition: all .3s ease;
  max-height: 0;
}

.top-level-item:hover {
  .submenu {
    max-height: 100%;
  }
}
于 2021-03-26T18:56:35.737 回答