CSS转换不适用于高度：auto

Question

我刚遇到一个小问题，情况是这样的：

当用户点击列表项时，我有一个需要展开的列表。内容的高度可变，所以这就是我想要实现的目标：

使用JS在底层元素上切换CSS类（这是有用的）

我遇到的问题是，在CSS中使用过渡动画设置动画不会起作用：

.expandable{
    height:0px;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}

这是最初的CSS ^

切换时

：

.expandable{
   height:auto;
}

我遇到的问题是，一旦我使用高度自动而不是像素高度，转换会中断。问题：这在CSS中是不可能的，我应该使用JS来设置高度的动画，还是有办法在CSS中执行此操作？

谢谢