动画折叠和展开不固定高度的元素

其实如果是固定高度的元素，折叠和展开时很容易添加动画，之间用 transition 配合修改 height 值即可生效。

而不固定高度的元素，便无法修改 height 到固定值，最多可以修改 height 为 auto，单这样一来，transition 就不生效了。

两个思路解决此问题：

1，不再 transition 配合修改 height ，而是 transition 配合修改 max-height ，也即初始 max-height 为0，触发时 修改max-height 为 100vh，如此可让 transition 生效。

2，用 js 手动修改。先设置 transition，没问题；初始 height 为0，触发时用 js 获取 scrollHeight，这个值并不等于 height 的0，会是真正的占用高度，然后手动设置height为 scrollHeight + "px"

 

以上是较好的解决方式，虽然也并不完美。

参考：Using CSS Transitions on Auto Dimensions | CSS-Tricks - CSS-Tricks