【css】transition对height:auto无效的解决办法

CSS3的transition可以作用于大部分属性值为数值之类的属性，包括width、height、font-size、color、opacity等。但是将transition应用于height:auto;时，浏览器会识别height值为0，因此无法直接从height: 0;过渡到height: auto;。

方法一（简单）、将过渡应用于max-height属性，通过设置一个大于元素所可能达到的最大高度值。代码如下：

.wrap{
    max-height: 0;
    overflow: hidden;
    -webkit-transition: all .3s ease-in;
    transition: all .3s ease-in;
}
.div1 {
    max-height: 800px; /* 假设元素的最大可能高度为800px */
}

缺陷是，在元素最大可能高度与实际高度相差比较大时，由于过渡总是从最大可能高度过渡到0，因此会看到过渡效果有明显延迟。

方法二、通过JS修正height:auto;不能过渡的问题，从而也避免了第一种方法的缺陷。思路是：

先不设置最大可能高度，先在隐藏状态下获取该元素的实际高度，通过设置el.style.visibility = ‘hidden’;隐藏该元素;
要显示元素时，通过DOM2 Style的insertRule()方法将所获取的高度插入到样式表中，再添加一个class，触发过渡效果；
待要隐藏元素时，再通过deleteRule()把刚才添加的CSS规则移除，并去掉添加的class； 由于改变样式表，所以导致了全局重绘，性能不如第一种。