您应该改用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>

当我发布这篇文章时，已经有30多个答案了，但我觉得我的答案比杰克已经接受的答案要好。

我对简单地使用最大高度和CSS3转换产生的问题并不满意，因为正如许多评论人士所指出的，你必须将最大高度值设置得非常接近实际高度，否则会延迟。有关该问题的示例，请参阅此JSFiddle。

为了解决这个问题（虽然仍然不使用JavaScript），我添加了另一个转换转换的HTML元素：translateY CSS值。

这意味着同时使用了max-height和translateY：max-heith允许元素向下推它下面的元素，而translateY提供了我们想要的“即时”效果。最大高度的问题仍然存在，但其影响有所减弱。这意味着你可以为你的最大高度值设置一个更大的高度，而不用担心它。

总的好处是，在转换回（塌陷）时，用户可以立即看到translateY动画，因此最大高度需要多长时间并不重要。

解决方案为Fiddle

正文{字体系列：无衬线；}.切换{位置：相对；边框：2px实心#333；边界半径：3px；边距：5px；宽度：200px；}.切换标题{边距：0；填充：10px；背景色：#333；颜色：白色；文本对齐：居中；光标：指针；}.拨动高度{背景色：番茄；溢出：隐藏；过渡：最大高度。6s轻松；最大高度：0；}.tggle：悬停.tggle高度{最大高度：1000px；}.tggle转换{填充：5px；颜色：白色；转换：转换。4s轻松；变换：translateY（-100%）；}.tggle：悬停.tggle变换{变换：translateY（0）；}<div class=“toggle”><div class=“toggle header”>切换！</div><div class=“toggle height”><div class=“toggle transform”><p>内容</p＞<p>内容</p＞<p>内容</p＞<p>内容</p＞</div></div></div><div class=“toggle”><div class=“toggle header”>切换！</div><div class=“toggle height”><div class=“toggle transform”><p>内容</p＞<p>内容</p＞<p>内容</p＞<p>内容</p＞</div></div></div>

对于每个状态，使用具有不同过渡缓和和延迟的最大高度。

HTML格式：

<a href="#" id="trigger">Hover</a>
<ul id="toggled">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
<ul>

CSS:

#toggled{
    max-height: 0px;
    transition: max-height .8s cubic-bezier(0, 1, 0, 1) -.1s;
}

#trigger:hover + #toggled{
    max-height: 9999px;
    transition-timing-function: cubic-bezier(0.5, 0, 1, 0); 
    transition-delay: 0s;
}

参见示例：http://jsfiddle.net/0hnjehjc/1/

我意识到这条线索已经过时了，但它在某些谷歌搜索中排名靠前，所以我认为它值得更新。

还可以只获取/设置元素自身的高度：

var load_height = document.getElementById('target_box').clientHeight;
document.getElementById('target_box').style.height = load_height + 'px';

您应该在内联脚本标记中的target_box结束标记之后立即转储此Javascript。

这是一个仅限CSS的解决方案，具有以下财产：

开始时没有延迟，过渡也不会提前停止。在两个方向上（展开和折叠），如果在CSS中指定300毫秒的转换持续时间，则转换需要300毫秒。它正在转换实际高度（与transform:scaleY（0）不同），因此如果可折叠元素后面有内容，它会做正确的事情。虽然（和其他解决方案一样）有神奇的数字（比如“选择一个比你的盒子永远都要高的长度”），但如果你的假设最终是错误的，这并不是致命的。在这种情况下，转换看起来可能并不令人惊讶，但在转换之前和之后，这不是问题：在展开（高度：自动）状态下，整个内容始终具有正确的高度（不同于例如，如果选择的最大高度太低）。在塌陷状态下，高度应该为零。

Demo

这里有一个演示，其中有三个可折叠的元素，它们都有不同的高度，都使用相同的CSS。您可能希望在单击“运行代码段”后单击“完整页面”。请注意，JavaScript仅切换折叠的CSS类，不涉及度量。（通过使用复选框或：target，您可以在完全没有JavaScript的情况下进行这个精确的演示）。还要注意，负责转换的CSS部分很短，HTML只需要一个额外的包装元素。

$（函数（）{$（“.tggler”）.click（函数（）{$（this）.next（）.tggleClass（“塌陷”）；$（this）.tggleClass（“已切换”）；//这只会旋转展开器箭头});});.可折叠包装纸{显示：柔性；溢出：隐藏；}.可折叠包装：在之后{内容：“”；高度：50px；过渡：高度0.3s线性，最大高度0s 0.3s线性；最大高度：0px；}.可折叠{过渡：边缘底部0.3s立方bezier（0，0，0、1）；边距底部：0；最大高度：1000000px；}.scollapsible-wrappercollapsed>.scollapsble{边距底部：-2000px；过渡：边缘底部0.3s立方bezier（1，0，1，1），能见度0s 0.3s，最大高度0s 0.3s；可见性：隐藏；最大高度：0；}.可折叠包装器.折叠：之后{高度：0；过渡：高度0.3s线性；最大高度：50px；}/*可折叠实现结束；下面的东西只是这个演示的样式*/#集装箱{显示：柔性；对齐项目：弹性开始；最大宽度：1000px；边距：0自动；} .菜单{边框：1px实心#ccc；方框阴影：0 1px 3px rgba（0,0,0,0.5）；边距：20px；}.菜单项{显示：块；背景：线性梯度（到底部，#fff 0%，#eee 100%）；边距：0；填充：1em；线高：1.3；}.可折叠.菜单项{左侧边框：2px实心#888；右边框：2px实心#888；背景：线性梯度（至底部，#eee 0%，#ddd 100%）；}菜单项日志{背景：线性梯度（至底部，#aaa 0%，#888 100%）；颜色：白色；光标：指针；}.menu item.tggler：之前{内容：“”；显示：块；左侧边框：8px纯白色；边框顶部：8px实心透明；边框底部：8px实心透明；宽度：0；高度：0；浮动：右侧；转变：转变0.3s缓和；}.menu item.tggler.toggled:之前{变换：旋转（90度）；}正文｛字体系列：无衬线；字体大小：14px；｝*，*：之后{框大小调整：边框框；}<script src=“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js“></script><div id=“container”><div class=“menu”><div class=“menu item”>涉及全息甲板的东西</div><div class=“menu item”>派遣一支客场球队</div><div class=“menu item toggler”>高级解决方案</div><div class=“可折叠包装器已折叠”><div class=“可折叠”><div class=“menu item”>单独的茶托</div><div class=“menu item”>派遣一支包括队长在内的客场球队（尽管Riker表示抗议）</div><div class=“menu item”>Ask Worf</div><div class=“menu item”>涉及19世纪卫斯理和全息甲板的东西</div><div class=“menu item”>向Q寻求帮助</div></div></div><div class=“menu item”>甜言蜜语外星人侵略者</div><div class=“menu item”>从辅助系统重新布线</div></div><div class=“menu”><div class=“menu item”>涉及全息甲板的东西</div><div class=“menu item”>派遣一支客场球队</div><div class=“menu item toggler”>高级解决方案</div><div class=“可折叠包装器已折叠”><div class=“可折叠”><div class=“menu item”>单独的茶托</div><div class=“menu item”>派出一支包括队长在内的客场球队（尽管Riker表示抗议）</div></div></div><div class=“menu item”>甜言蜜语外星人侵略者</div><div class=“menu item”>从辅助系统重新布线</div></div><div class=“menu”><div class=“menu item”>涉及全息甲板的东西</div><div class=“menu item”>派遣一支客场球队</div><div class=“menu item toggler”>高级解决方案</div><div class=“可折叠包装器已折叠”><div class=“可折叠”><div class=“menu item”>单独的茶托</div><div class=“menu item”>派出一支包括队长在内的客场球队（尽管Riker表示抗议）</div><div class=“menu item”>Ask Worf</div><div class=“menu item”>涉及19世纪卫斯理和全息甲板的东西</div><div class=“menu item”>向Q寻求帮助</div><div class=“menu item”>单独的茶托</div><div class=“menu item”>派遣一支包括队长在内的客场球队（尽管Riker表示抗议）</div><div class=“menu item”>Ask Worf</div><div class=“menu item”>涉及19世纪卫斯理和全息甲板的东西</div><div class=“menu item”>向Q寻求帮助</div></div></div><div class=“menu item”>甜言蜜语外星人侵略者</div><div class=“menu item”>从辅助系统重新布线</div></div></div>

它是如何工作的？

事实上，实现这一点涉及两个过渡。其中一个将边距底部从0px（展开状态）转换为-2000px（折叠状态）（类似于此答案）。这里的2000是第一个神奇的数字，它基于这样的假设，即你的盒子不会高于这个数字（2000像素似乎是一个合理的选择）。

单独使用保证金底部转换有两个问题：

如果你有一个高于2000像素的框，那么底部的边距：-2000px不会隐藏所有内容，即使在折叠的情况下也会有可见的内容。这是我们稍后要做的一个小修复。如果实际的框是1000像素高，并且你的过渡是300毫秒长，那么在大约150毫秒之后，可见的过渡已经结束（或者，在相反的方向上，延迟150毫秒开始）。

解决第二个问题是第二个转换出现的地方，这个转换在概念上以包装器的最小高度为目标（“概念上”，因为我们实际上并没有为此使用min-height属性；稍后将详细介绍）。

这是一个动画，展示了如何将底部边距过渡与最小高度过渡相结合，这两个过渡都具有相同的持续时间，从而为我们提供了从全高到零高的组合过渡。

左栏显示负底部边距如何向上推动底部，从而降低可见高度。中间的条形图显示了最小高度如何确保在塌陷情况下过渡不会提前结束，而在扩展情况下，过渡不会延迟开始。右栏显示了两者的组合如何在正确的时间内使长方体从全高过渡到零高。

对于我的演示，我已经确定了50像素作为上限最小高度值。这是第二个神奇的数字，它应该低于盒子的高度。50px似乎也很合理；您似乎不太可能经常想要让一个元素在一开始甚至不到50像素高的情况下进行折叠。

正如您在动画中看到的，生成的过渡是连续的，但它是不可微分的——当最小高度等于由底部边距调整的全高度时，速度会突然变化。这在动画中非常明显，因为它对两个过渡都使用了线性计时函数，而且整个过渡非常缓慢。在实际情况下（我在顶部的演示），转换只需要300毫秒，而底部边缘转换不是线性的。我在这两种转换中都使用了很多不同的计时功能，而我最终使用的这些功能似乎最适合最广泛的情况。

还有两个问题需要解决：

从上面看，高度超过2000像素的盒子在折叠状态下没有完全隐藏，相反的问题是，在非隐藏的情况下，即使在转换未运行时，高度小于50像素的框也太高，因为最小高度使它们保持在50像素。

我们通过给容器元素一个最大高度来解决第一个问题：在折叠的情况下为0，0到0.3s的过渡。这意味着这不是真正的过渡，但最大高度是有延迟的；它只在过渡结束后才适用。为了正确工作，我们还需要为相反的非折叠状态选择一个数值最大高度。但与2000px的情况不同，选取过大的数字会影响转换的质量，在这种情况下，这真的无关紧要。因此，我们可以选择一个高度如此之高的数字，我们知道任何高度都不会接近这个数字。我选了一百万像素。如果你觉得你可能需要支持超过100万像素的内容，那么1）对不起，2）只需添加几个零。

第二个问题是为什么我们实际上没有使用最小高度作为最小高度过渡。相反，容器中有一个：：after伪元素，其高度从50px转换为零。这与最小高度具有相同的效果：它不会让容器收缩到伪元素当前具有的任何高度以下。但是因为我们使用的是高度，而不是最小高度，所以我们现在可以使用最大高度（再次使用延迟）在过渡结束后将伪元素的实际高度设置为零，确保至少在过渡之外，即使是小元素也具有正确的高度。因为min-height比max-height强，所以如果我们使用容器的min-heith而不是伪元素的高度，这将不起作用。就像上一段中的最大高度一样，该最大高度也需要过渡另一端的值。但在这种情况下，我们可以选择50像素。

在Chrome（Win、Mac、Android、iOS）、Firefox（Win，Mac、Android）、Edge、IE11（除了我的演示中的flexbox布局问题，我没有调试）和Safari（Mac、iOS）中进行测试。说到flexbox，应该可以在不使用任何flexbox的情况下实现这一功能；事实上，我认为你可以在IE7中让几乎所有的东西都正常工作，除了你不会有CSS转换，这是一个毫无意义的练习。

扩展@jake的答案，过渡将一直到最大高度值，从而产生极快的动画效果-如果您同时设置了悬停和关闭两种过渡，则可以进一步控制疯狂的速度。

因此，li:hover是指鼠标进入状态，然后非悬停属性上的转换将是鼠标离开。

希望这会有所帮助。

例如：

.sidemenu li ul {
   max-height: 0px;
   -webkit-transition: all .3s ease;
   -moz-transition: all .3s ease;
   -o-transition: all .3s ease;
   -ms-transition: all .3s ease;
   transition: all .3s ease;
}
.sidemenu li:hover ul {
    max-height: 500px;
    -webkit-transition: all 1s ease;
   -moz-transition: all 1s ease;
   -o-transition: all 1s ease;
   -ms-transition: all 1s ease;
   transition: all 1s ease;
}
/* Adjust speeds to the possible height of the list */

这是一把小提琴：http://jsfiddle.net/BukwJ/