javascript - CSS - 动画元素的高度自动

<分区>

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

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

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

如何将元素的高度动画化为自动？

提前致谢

大卫

最佳答案

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

关于javascript - CSS - 动画元素的高度自动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40347160/

相关文章：

javascript - 中心部门