在开发中，控制元素的消失与现实，如果直接使用display:none，会显得很生硬，如果加上一点动画效果，看上去就会美好很多，在移动端，因为CSS3动画支持性良好，所有移动端的JavaScript框架都会没有动画模块的，此时，使用CSS实现动画就成为了最终选型。实际开发中，如果高度不定的元素加上height的动画，从0到auto的话，简单适应CSS就有点搞不定了
奇怪事件
首先我针对一个定高元素，比如240px，从240px到0进行动画变化，我通过切换.hideclass实现变化，讲道理是不存在什么问题的。但在我项目中却一直不生效。
实在是觉得很奇怪，突然之间我把操作反过来，我改成切换.active来实现，突然生效了，后面发现前人，写了一个.hide的全局class，而且还加上了!important，内容直接就是display:none，从而导致不生效，我只能说有点坑哇。
max-height
我们可以通过设置一个足够大的最大高度值，然后将 transition 应用在 max-height 属性上，我们需要设定为保证比展开内容高度大的值就可以。
这种方式使用纯CSS就能解决问题，但有个小问题，虽然说从适用范围讲，max-height值越大使用场景越多，但是如果max-height值太大，在收起的时候就会有效果延迟的问题
建议max-height使用足够大的安全最小值
引入JS
本质就是通过JS获取实际值，执行动画，说的轻巧，但这里面有不少坑。直接用代码说话（vue demo）
toggleOrderPanel() {
this.showOrderPanel = !this.showOrderPanel
var element = this.$els.orderlistel
var height = element.clientHeight
// 设置为auto，才能获取到高度
element.style.height = "auto";
var targetHeight = this.showOrderPanel ? element.clientHeight : 0
element.style.height = height + 'px'; // 还原初始值
element.offsetWidth // 强制重绘
element.style.height = targetHeight + 'px'
}