带动画的 CSS 下拉菜单（无 js）

Posted 2023-03-06

【中文标题】带动画的 CSS 下拉菜单（无 js）

【英文标题】：CSS Dropdown menu with animation (no js)

【发布时间】：2013-05-01 13:32:14

【问题描述】：

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

【问题讨论】：

可以看一个例子...jsfiddle.net/Sm9pU

CSS transition height: 0; to height: auto;的可能重复

【参考方案1】：

请参阅此主题以供参考：How can I transition height: 0; to height: auto; using CSS?

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

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

Can you use CSS3 to transition from height:0 to the variable height of content?

【讨论】：

啊，没想到，想远离 js 以减少你在旧电脑和移动设备上得到的那种颤抖效果。猜猜我可能会坚持转换到预先计算的高度，公平地说，考虑到每个 li 都有固定的高度，这应该不难计算。为此干杯！

一点也不难，当然也足够了。如果您动态加载导航，则计算该高度会变得很麻烦，一旦您修改导航，就会弄乱您的计算。理想情况下，您不必手动更改该值。但是，如果您的导航预计不会发生太大变化，我认为大多数人都可以忍受这个问题。

【参考方案2】：

您不能将 CSS 过渡与 height:auto 一起使用，只能使用特定值。

.menu:hover ul 
    height: 100px;

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

【讨论】：

为此干杯，正如我上面所说，可能只是要遵循这个建议

【参考方案3】：

下拉菜单的动画可以用纯 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

【参考方案4】：

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

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


.top-level-item:hover 
  .submenu 
    max-height: 100%;
  

【讨论】：

不，你不能用最大高度为 0 -> 100% 设置动画。你确定这个答案？你能提供一个 Codepen 或同化吗？