你可以，用一点非语义的小把戏。我通常的方法是设置外部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>

我的解释是，动画运行需要明确的高度。当高度（起始高度或结束高度）为自动时，无法获得高度动画。

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

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

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

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

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

我只是为<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。

使用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上重复）

根据MDN Web Docs，CSS转换规范中故意排除了auto值，因此在网格和柔性布局中使用height:100%、top或flex属性，而不是height:auto。

展开/折叠覆盖

.grid容器{显示：栅格；位置：绝对；}.内容{背景：浅绿色；高度：0；溢出：隐藏；过渡：1s；}span:hover+.gridcontainer.content{高度：100%；}<span>悬停在我上方</span><div class=“grid container”><div class=“content”>Lorem ipsum dolor sit amet，consectetur adipiscing elit，sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。在最低限度的威尼斯，quis nostrud exerciation ullamco labour nisi Ut aliquip ex a commo consequat。这是一个很好的例子。除了你偶尔犯下的错误外，你还得承担责任，这是因为你在实验室里表现得很糟糕</分区></div><p>其余页面内容</p＞

展开/折叠滑动覆盖

.grid容器{显示：栅格；位置：绝对；溢出：隐藏；指针事件：无；/*以实现与容器下方元素的交互*/}.内容{背景：浅绿色；指针事件：自动；位置：相对；顶部：-100%；过渡：1s；}span:hover+.gridcontainer.content{顶部：0；}<span>悬停在我上方</span><div class=“grid container”><div class=“content”>Lorem ipsum dolor sit amet，consectetur adipiscing elit，sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。在最低限度的威尼斯，quis nostrud exerciation ullamco labour nisi Ut aliquip ex a commo consequat。这是一个很好的例子。除了你偶尔犯下的错误外，你还得承担责任，这是因为你在实验室里表现得很糟糕</分区></div><p>其余页面内容</p＞

在文档流中展开/折叠

html格式{显示：栅格；}正文{显示：柔性；弯曲方向：柱；}.内容{背景：浅绿色；弹性基础：0；溢出：隐藏；过渡：1s；}span：悬停+内容{挠曲：1；}<span>悬停在我上方</span><div class=“content”>Lorem ipsum dolor sit amet，consectetur adipiscing elit，sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。在最低限度的威尼斯，quis nostrud exerciation ullamco labour nisi Ut aliquip ex a commo consequat。这是一个很好的例子。除了你偶尔犯下的错误外，你还得承担责任，这是因为你在实验室里表现得很糟糕</分区><p>其余页面内容</p＞