我只是为<li>元素设置动画，而不是为整个容器设置动画：

<style>
.menu {
    border: solid;
}
.menu ul li {
    height: 0px;
    transition: height 0.3s;
    overflow: hidden;
}
button:hover ~ .wrapper .menu ul li,
button:focus ~ .wrapper .menu ul li,
.menu:hover ul li {
    height: 20px;
}
</style>


<button>Button</button>
<div class="wrapper">
    <div class="menu">
        <ul>
            <li>menuitem</li>
            <li>menuitem</li>
            <li>menuitem</li>
            <li>menuitem</li>
            <li>menuitem</li>
            <li>menuitem</li>
        </ul>
    </div>
</div>

您可以添加ul:margin 0；高度为0。

杰克对最大高度动画化的回答很好，但我发现设置大的最大高度所导致的延迟很烦人。

可以将可折叠内容移动到内部div中，并通过获取内部div的高度来计算最大高度（通过JQuery，它将是outerHeight（））。

$('button').bind('click', function(e) { 
  e.preventDefault();
  w = $('#outer');
  if (w.hasClass('collapsed')) {
    w.css({ "max-height": $('#inner').outerHeight() + 'px' });
  } else {
    w.css({ "max-height": "0px" });
  }
  w.toggleClass('collapsed');
});

这里有一个jsfiddle链接：http://jsfiddle.net/pbatey/duZpT

这里有一个jsfiddle，它提供了所需的绝对最小代码量：http://jsfiddle.net/8ncjjxh8/

具有行高、填充、不透明度和边距的可选CSS解决方案：

正文{背景色：亚麻；}主要的，主要的{背景色：白色；}[id^=“toggle_”]~.content{线条高度：0；不透明度：0；填充：0.5雷姆；过渡：.2s缓和；}[id^=“toggle_”]~.content>p{边距：0；过渡：.2s缓和；}[id^=“toggle_”]：选中~.content{不透明度：1；衬垫：.5rem；线高：1.5；}[id^=“toggle_”]：选中~.content p{边距底部：.75rem；}[id^=“toggle_”]+标签{显示：柔性；调整内容：间距；衬垫：0.5em 1em；背景：灯光转向蓝；边框底部：1px实心灰色；光标：指针；}[id^=“toggle_”]+标签：之前{content:“显示”；}[id^=“toggle_”]：选中+标签：之前{content:“隐藏”；}[id^=“toggle_”]+标签：之后{内容：“\25BC”；}[id^=“toggle_”]：选中+标签：之后{内容：“\25B2”；}<main>＜div＞<input type=“checkbox”id=“toggle_1”隐藏><label for=“toggle_1”hidden></label><div class=“content”><p>Lorem ipsum dolor坐amet，consectetur adipiscing elit。Duis dolor neque，准将leo ut，拍卖人tincidunt mauris。Nunc frigilla tincidunt metus，非孕妇lorem调味品非。Duis ornare purus nisl，位于埃格特拱门。整数lorem ante，porta vulputate dui ut，blandit tempor tellus。Proin facilisis bibendum直径，位于调味品中。Donec volutpat dui eu mollis vulputate。Nunc commodo lobortis Nunc at ultrices。吊耳中的吊耳直径。</p></div></div>＜div＞<input type=“checkbox”id=“toggle_2”隐藏><label for=“toggle_2”hidden></label><div class=“content”><p>我不能坐在拍卖行旁边。Vivamus sed nisi vite nibh调味品pulvinar eu vel lorem。生命的前阶段是一个非常容易的阶段。在外的大型流苏。做一个临时自由人。Donec sapien libero，lacinia sed aliquet ut，imperite finibus tellus。努克·泰勒斯·莱图斯，波苏雷侯爵的朗库斯，坦普斯坐在埃尼姆。Morbi等人使用了一种边缘数字丝绒。Donec commodo，est id accumsan cursus，diam dui hendrerit nisi，vel hendreritpurus dolor ut risus。Phasellus mattis egestas ipsum sed ullamcorper。在直径舌中，rhoncus vel enim et，impredite porta justo。Curabitur vulputate hendrerit nisl，et ultricies diam.Maecenas ac leo a diam cursus ornare nec eu quam。</p><p>Sed非vulputate purus，Sed consectetur odio。Sed non-nih frigilla，impressive odio nec，efficitur ex.Suspendiss ut dignissim enim。迈塞纳斯·费利斯·奥古斯特（Maecenas felis augus），坐在埃米特·塞姆·费利利亚（sem frigilla）上，坐在艾姆桑·费利利亚的笔尖上。Quisque posuere lacus tortor，ques malesuada magna elementum a.Nullam id purus in pre terstie tincidunt。Morbi luctus orci eu egestas dignissim。Sed tincidunt，libero quis scelerisque bibendum，ligula nisi gravida libero，id lacinia nulla leo in elit。</p><p>Aenean aliquam risus id consectetur sagitis。Aliquam Aliquam nisl eu预示着诅咒，意味着最大的痛苦。Aliquam ipsum dolor，tempor et justo ac，fermentum mattis dui。伊蒂安在波苏雷舌。Vestibulum tortor metus，viverra vitae mi non，laoret iaculis purus。Praesent vel semper笔尖。Curabitur一只刚果拉库斯。在et pellentesque lorem。Morbi posuere猫科动物，无直径壳核，无壳核。Vivamus ultricies、massa id sagitis consequat、sem mauris tincidunt nunc、eu vehicula augus quam ut mauris。</p></div></div>＜div＞<input type=“checkbox”id=“toggle_3”hidden><label for=“toggle_3”hidden></label><div class=“content”><p>Lorem ipsum dolor坐amet，consectetur adipiscing elit。Duis dolor neque，准将leo ut，拍卖人tincidunt mauris。Nunc frigilla tincidunt metus，非孕妇lorem调味品非。Duis ornare purus nisl，位于埃格特拱门。整数lorem ante，porta vulputate dui ut，blandit tempor tellus。Proin facilisis bibendum直径，位于调味品中。Donec volutpat dui eu mollis vulputate。Nunc commodo lobortis Nunc at ultrices。吊耳中的吊耳直径。</p><p>Sed非vulputate purus，Sed consectetur odio。Sed non-nih frigilla，impressive odio nec，efficitur ex.Suspendiss ut dignissim enim。迈塞纳斯·费利斯·奥古斯特（Maecenas felis augus），坐在埃米特·塞姆·费利利亚（sem frigilla）上，坐在艾姆桑·费利利亚的笔尖上。Quisque posuere lacus tortor，ques malesuada magna elementum a.Nullam id purus in pre terstie tincidunt。Morbi luctus orci eu egestas dignissim。Sed tincidunt，libero quis scelerisque bibendum，ligula nisi gravida libero，id lacinia nulla leo in elit。</p></div></div></main>

您应该改用scaleY。

上一页{背景色：#eee；变换：缩放Y（0）；变换原点：顶部；转变：转变0.26s；}p： 悬停~ul{变换：缩放Y（1）；}<p>将此悬停</p>＜ul＞<li>咖啡</li><li>茶</li><li>牛奶</li></ul>

我在jsfiddle上制作了上述代码的供应商前缀版本，并将jsfiddl更改为使用scaleY而不是height。

编辑有些人不喜欢scaleY如何转换内容。如果这是一个问题，那么我建议使用剪辑。

上一页{剪辑：矩形（自动，自动，0，自动）；位置：绝对；边距：-1rem 0；衬垫：.5rem；颜色：白色；背景色：rgba（0、0、0和0.8）；过渡特性：剪辑；过渡时间：0.5s；过渡时间函数：立方贝塞尔（0.175、0.885、0.32、1.275）；}h3:悬停~ul，h3：活性~ul，ul：悬停{剪辑：矩形（自动，自动，10rem，自动）；}<h3>悬停在此处</h3>＜ul＞<li>此列表</li><li>被剪裁</li><li>剪辑过渡</li><li>将显示它</li></ul><p>一些文本。。。</p>

此解决方案使用了一些技术：

填充底部：100%“hack”，其中百分比是根据元素的当前宽度定义的。有关此技术的更多信息。浮动收缩包装，（需要额外的div来应用浮动清除黑客）非语义使用https://caniuse.com/#feat=css-编写模式和一些转换来撤销它（这允许在垂直上下文中使用上面的填充黑客）

结果是，我们只使用CSS实现了高性能的转换，并使用一个转换函数来平滑地实现转换；圣杯！

当然，这也有缺点！我无法确定如何控制内容被截断的宽度（溢出：隐藏）；由于衬垫底部的裂缝，宽度和高度密切相关。不过，也许有办法，所以我们会回到过去。

https://jsfiddle.net/EoghanM/n1rp3zb4/28/

正文{填充：1em；}.触发器{字号：粗体；}/*.扩展器仅用于浮动清除*/.扩展器：：之后{内容：“”；显示：表格；清晰：两者都有；}.外部{float：左；/*目的：收缩以适应内容*/边框：1px实心绿色；溢出：隐藏；}.内部{过渡：填充底部0.3s，方便进出；/*或者你能想出的任何疯狂的转换函数*/底部填充：0%；/*填充百分比是根据宽度定义的。此级别的宽度等于内容的高度*/高度：0；/*不幸的是，书写模式的改变还有其他的不良影响，比如光标的方向*/写入模式：垂直rl；光标：默认值；/*不需要垂直文本（横向工字梁）*/变换：旋转（-90度）平移X（-100%）；/*撤消写入模式*/变换原点：0 0；边距：0；/*此处的左/右边距将增加高度*/}.inter>div｛white-space:nowrap；｝.extender:hover.intern，/*在展开时保持打开*/.t触发器：悬停+扩展器.内部{填充底部：100%；}<div class=“trigger”>HoverMe</div><div class=“扩展器”><div class=“outer”><div class=“inner”><div>第一项</div><div>内容</div><div>内容</div><div>内容</div>＜div＞长内容不能宽于外部高度，不幸的是＜/div＞<div>最后一项</div></div></div></div>＜div＞在内容之后</div></div>

无硬编码值。

没有JavaScript。

无近似值。

诀窍是使用隐藏和复制的div让浏览器了解100%的含义。

每当您能够复制要设置动画的元素的DOM时，此方法都适用。

.外部{边框：红色虚线1px；位置：相对；}.虚拟{可见性：隐藏；}.真实{位置：绝对；背景：黄色；高度：0；过渡：高度0.5s；溢出：隐藏；}.outer:悬停>.real{高度：100%；}将鼠标悬停在下面的框上：<div class=“outer”><!-- 要设置动画的实际元素--><div class=“real”>不可预测的内容不可预测内容不可预知内容不可预见内容不可预料内容不可预计内容不可预期内容不可预报内容不可预言内容内容不可预测内容不可预知内容</div><!-- 要设置动画的元素的精确副本。--><div class=“dummy”aria hidden=“true”>不可预测的内容不可预测内容不可预知内容不可预见内容不可预料内容不可预计内容不可预期内容不可预报内容不可预言内容内容不可预测内容不可预知内容</div></div>