使用CSS3过渡设置高度动画的一个视觉解决方法是设置填充动画。

你不太能得到完全的擦除效果，但在过渡持续时间和填充值之间进行切换应该会让你足够接近。如果您不想显式设置高度/最大高度，这应该是您想要的。

div {
    height: 0;
    overflow: hidden;
    padding: 0 18px;
    -webkit-transition: all .5s ease;
       -moz-transition: all .5s ease;
            transition: all .5s ease;
}
div.animated {
    height: auto;
    padding: 24px 18px;
}

http://jsfiddle.net/catharsis/n5XfG/17/（从jsFiddle上方的stephband上重复）

我结合了最大高度和负边距来实现这个动画。

我使用了最大高度：2000px，但如果需要，您可以将该值设置为更高的值。我为展开时的最大高度和折叠时的边距设置动画。

js部分只是点击，对于纯css解决方案，可以用：hover或checkbox替换。

到目前为止，我只能看到两个问题，

过渡时间有限。（我只添加了2次计时）如果在下拉列表折叠时再次单击，它将跳转。

这是结果

[…document.querySelectorAll（'.ab'）].forEach（包装器=>{wrapper.addEventListener（'click'，函数（）{this.classList.tggle（'active'）；});});* {边距：0；框大小调整：边框框；}.c文件{溢出：隐藏；}.个项目{宽度：100%；可见性：隐藏；最大高度：0；边距底部：-2000px；-webkit过渡：边缘0.6s立方bezier（1，0，1，1），最大高度0s 0.6s线性，可见性0s 0.6s直线；过渡：边缘0.6s立方贝塞尔（1，0，1，1），最大高度0.6s线性，可见性0.6s线性；}.项>*{填充：1rem；背景色：#ddd；-webkit过渡：背景色0.6s轻松；过渡：背景色0.6s轻松；}.items>*：悬停{背景色：#eee；}.ab文件{填充：1rem；光标：指针；背景：#eee；}.ab活动+.c.项目{最大高度：2000px；边距底部：0；可见性：可见；-webkit过渡：最大高度0.6s立方bezier（1，0，1，1）；过渡：最大高度0.6s立方bezier（1，0，1，1）；}下拉列表{右边距：1rem；}.包装器{显示：-webkit框；显示：柔性；}<div class=“wrapper”><div class=“下拉列表”><div class=“ab”>仅文本</div><div class=“ab”>仅文本</div><div class=“ab”>下拉列表</div><div class=“c”><div class=“items”><p>项目</p><p>项目</p><p>项目asl；dk l；卡斯尔；d sa；lk语言</p><p>项目sal；千分之三</p><p>项目</p></div></div><div class=“ab”>仅文本</div><div class=“ab”>仅文本</div></div><div class=“下拉列表”><div class=“ab”>下拉列表</div><div class=“c”><div class=“items”><p>项目</p><p>项目</p><p>项目</p><p>项目</p><p>项目</p><p>项目</p><p>项目</p><p>项目</p><p>项目</p><p>项目</p><p>项目</p></div></div><div class=“ab”>text</div></div><div class=“下拉列表”><div class=“ab”>占位符</div><div class=“ab”>下拉列表</div><div class=“c”><div class=“items”><p>项目</p><p>项目</p></div></div><div class=“ab”>占位符</div><div class=“ab”>占位符</div><div class=“ab”>占位符</div></div></div><h1>要推送的文本</h1>

我没有详细阅读所有内容，但我最近遇到了这个问题，我采取了以下措施：

div.class{
   min-height:1%;
   max-height:200px;
   -webkit-transition: all 0.5s ease;
   -moz-transition: all 0.5s ease;
   -o-transition: all 0.5s ease;
   -webkit-transition: all 0.5s ease;
   transition: all 0.5s ease;
   overflow:hidden;
}

div.class:hover{
   min-height:100%;
   max-height:3000px;
}

这允许你有一个div，它首先显示高达200px的内容，悬停时它的大小至少与div的整个内容一样高。div不会变成3000px，但3000px是我强加的限制。确保在非：悬停上进行转换，否则可能会出现一些奇怪的渲染。这样：hover继承自非：hover。

从px到%或自动转换不起作用。您需要使用相同的度量单位。

你可以，用一点非语义的小把戏。我通常的方法是设置外部DIV的高度动画，该外部DIV有一个子级，这是一个仅用于测量内容高度的无样式DIV。

函数growDiv（）{var growDiv=文档.getElementById（'grow'）；if（growtDiv.clientHeight）{growtDiv.style.height=0；}其他{var wrapper=document.querySelector（'.measureingWrapper'）；growDiv.style.height=wrapper.clientHeight+“px”；}}#成长{-moz过渡：高度.5s；-ms过渡：高度.5s；-o过渡：高度.5s；-webkit过渡：高度.5s；过渡：高度.5s；高度：0；溢出：隐藏；轮廓：1px纯红色；}<input type=“button”onclick=“growDiv（）”value=“grow”><div id='grow'><div class='measureingWrapper'>＜div＞我部门的内容。</div>＜div＞我部门的内容。</div>＜div＞我部门的内容。</div>＜div＞我部门的内容。</div>＜div＞我部门的内容。</div>＜div＞我部门的内容。</div></div></div>

人们希望能够省去.metringWrapper，只需将DIV的高度设置为auto并设置动画，但这似乎不起作用（设置了高度，但没有动画发生）。

函数growDiv（）{var growDiv=文档.getElementById（'grow'）；if（growtDiv.clientHeight）{growtDiv.style.height=0；}其他{growDiv.style.height=“自动”；}}#成长{-moz过渡：高度.5s；-ms过渡：高度.5s；-o过渡：高度.5s；-webkit过渡：高度.5s；过渡：高度.5s；高度：0；溢出：隐藏；轮廓：1px纯红色；}<input type=“button”onclick=“growDiv（）”value=“grow”><div id='grow'>＜div＞我部门的内容。</div>＜div＞我部门的内容。</div>＜div＞我部门的内容。</div>＜div＞我部门的内容。</div>＜div＞我部门的内容。</div>＜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/

当其中一个高度为自动时，当前无法在高度上设置动画，必须设置两个显式高度。