您可以从height:0转换到height:auto，前提是您还可以提供最小高度和最大高度。

div.stretchy{
    transition: 1s linear;
}

div.stretchy.hidden{
    height: 0;
}

div.stretchy.visible{
    height: auto;
    min-height:40px;
    max-height:400px;
}

将高度设置为自动并转换最大高度。

在Chrome v17上测试

div {
  position: absolute;
  width:100%;
  bottom:0px;
  left:0px;

  background:#333;
  color: #FFF;

  max-height:100%; /**/
  height:auto; /**/

  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.close {
  max-height:0%; /**/
}

可以通过使用片段路径创建反向（塌陷）动画来实现这一点。

#子0{显示：无；}#parent0:悬停#child0{显示：块；动画：高度动画；动画持续时间：200ms；动画计时功能：线性；动画填充模式：向后；动画迭代次数：1；动画延迟：200ms；}@关键帧高度动画{0% {剪辑路径：多边形（0%0%，100%0.00%，100%0%，0%0%）；}100% {剪辑路径：多边形（0%0%，100%0.00%，100%100%，0%100%）；}}<div id=“parent0”><h1>将我悬停（高度：0）</h1><div id=“child0”>一些内容<br>一些内容<br>一些内容<br>一些内容<br>一些内容<br>一些内容<br></div></div>

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

我的解决方法是将最大高度转换为精确的内容高度，以获得流畅的动画效果，然后使用transitionEnd回调将最大高度设置为9999px，以便内容可以自由调整大小。

var content=$（'#content'）；content.inner=$（'#content.inter'）；//关闭时需要获取内容大小的内部div//css转换回调content.on（'transitionEnd-webkitTransitionEnd transitiononend oTransitionEnd-msTransitionEnd'，函数（e）{if（content.hasClass（'open'））{content.css（'max-height'，9999）；//尝试将此设置为“无”。。。我敢你！}});$（'#toggle'）.on（'click'，函数（e）{content.tggleClass（“打开关闭”）；content.contentHeight=content.outerHeight（）；if（content.hasClass（'closed'））{//禁用转换&将最大高度设置为内容高度content.removeClass（'transitions'）.css（'max-height'，content.contentHeight）；setTimeout（函数）{//启用和启动转换content.addClass（'转换'）.css({'最大高度'：0，“不透明度”：0});}, 10); // 10ms超时是禁用/启用转换的秘密因素//chrome只需要1ms，但FF需要约10ms，否则会在第一部动画中因某种原因而窒息}否则如果（content.hasClass（'open'））{content.contentHeight+=content.inter.outerHeight（）；//如果已关闭，请将内部高度添加到内容高度内容.css({'max height'：content.contentHeight，“不透明度”：1});}});.转换{过渡：所有0.5秒都是缓进缓出；-webkit转换：所有0.5s都易于输入输出；-moz转换：所有0.5s都易于输入输出；}正文{字体系列：Arial；线高：3ex；}代码{显示：内联块；背景：#fafafa；填充：0 1ex；}#切换{显示：块；填充：10px；边距：10px自动；文本对齐：居中；宽度：30ex；}#内容{溢出：隐藏；边距：10px；边框：1px实心#666；背景：#efefef；不透明度：1；}#内容。内部{填充：10px；溢出：自动；}<script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js“></script><div id=“content”class=“open”><div class=“inner”><h3>在<code>height:0</code>和<code>high:auto</code>之间平滑CSS转换</h3><p>一个巧妙的解决方法是使用<code>max-height</code>而不是<code>height</code>，并将其设置为比内容更大的值。问题是浏览器使用此值来计算过渡持续时间。因此，如果您将其设置为＜code＞max-height:1000px＜/code＞，但内容只有100px高，则动画将快10倍</p＞<p>另一种选择是使用JS测量内容高度，并转换到固定值，但如果内容发生变化，则必须跟踪内容并手动调整其大小</p＞<p>此解决方案是两种转换的混合，即转换到测量的内容高度，然后在转换后将其设置为<code>最大高度：9999px</code>，以调整流体内容大小</p＞</div></div><br/><button id=“toggle”>接受挑战</按钮>

每当DOM发生变化时，为跟踪的元素设置style=“”属性。名为变种转换的插件您可以使用CSS进行转换，而不使用黑客。您不必编写任何JavaScript。只需包含JavaScript库并指定要在HTML中查看的属性。你不必使用固定高度的CSS。使用data mutant attributes=“X”设置要跟踪的元素。

<div data-mutant-attributes="height">                                                                      
    This is an example with mutant-transition                                                                                                          
</div>

这使用MutationObserver跟踪DOM中的更改。您不必设置任何内容或使用JavaScript手动设置动画。更改将自动跟踪。然而，由于它使用了MutationObserver，这只会在IE11+中转换。<IE11将看到快照更改（无过渡）。

小提琴手

演示从高度：自动转换到高度：100%演示过渡高度：添加子对象时自动