CSS - Animate元素的自动高度

Question

这似乎是一个愚蠢的问题，但我已经在这里工作了几个小时，我无法让这件事变得简单。

我有一个身高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;。

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

这是我创建的JSFiddle：https://jsfiddle.net/0ctzc4hv/1/

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

提前致谢，

大卫

Answer 1

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

Answer 2

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

隐藏元素：

Display: none; 

JQuery函数：

$('you_element').slideDown();