CSS - 动画元素的高度自动[重复]答案

【问题标题】：CSS - Animate element's height to auto [duplicate]CSS - 动画元素的高度自动[重复]
【发布时间】：2017-03-13 19:55:24
【问题描述】：

这似乎是一个愚蠢的问题，但我已经做了好几个小时了，我无法让这个简单的事情发挥作用。

我有一个高度为0px的元素。

HTML

<div class="element"> ...content... </div>

CSS

.element {
    height: 0px;
    overflow: hidden;
    transition: height 2s;
}

然后我有一些 js 会检查何时单击按钮，并将类“animate”添加到元素中。

CSS

.animate {
    height: auto;
}

问题是，没有任何像 css 中指定的 2 秒动画。

我测试了同样的东西，但不是动画到height: auto;，而是动画到height: 150px;。

这样做是可行的，但我需要使用自动高度，因为内容的高度会有所不同。

如何将元素的高度设置为自动？

提前致谢，

大卫

【问题讨论】：

【解决方案1】：

你为什么不隐藏它，然后使用jquery来实现你想要的：

隐藏元素：

Display: none;

jQuery 函数：

$('you_element').slideDown();

【讨论】：

【解决方案2】：

auto 属性不可设置动画，您可以通过设置 max-height 属性的动画来解决此问题。

【讨论】：