不过，用 max-height 和 min-height 可以实现同等效果。
.box{
max-height: 120px
min-height: 120px
overflow: hidden
transition: max-height ease-out 0.2s}.box:hover{
max-height: 500px
transition: max-height ease-in 0.2s}
需求是有一些动态内容折叠起来的，点击后弹开
js定时器的动画过渡暂不考虑，于是就想到transition过渡
一开始就想着用trasition动画过渡就搞定啦，试了一下后，发现有问题
折叠的元素的高度height必须得设置一个值才可以有过渡的效果，要不就过渡不了
折中一下，就用js动态获取子元素的高度，然后给值到折叠的元素上实现过渡了
不过需要注意的是，内容的元素，虽然平常是不显示，但是还是暂据文本流的空间，所以缩起来后，要设置{visibility:hidden}.
打开时再设置{visibility:visible}
有效的过渡属性包括：background, position, border, color,margin, padding, height, width, outline, visibility, opacity, zindex,line-height, letter-spacing, word-spacing, min/maxlength/height/width, text的一些属性等等
transition-duration:time[,time]*：指定对象过渡的持续时间
transition-timing-function是transition属性里最为复杂的一个，针对的是过渡效果的特效。
五种预留特效：
linear:线性过渡。等同于贝塞尔曲线(0,0,1.0,1.0)
ease:平滑过渡。等同于贝塞尔曲线(0.25,0.1,0.25,1.0)
ease-in:由慢到快。等同于贝塞尔曲线(0.42,0,1.0,1.0)
ease-out:由快到慢。等同于贝塞尔曲线(0,0,0.58,1.0)
ease-in-out:又慢到快再到慢。等同于贝塞尔曲线(0.42,0,0.58,1.0)
transition-timing-function是transition属性里最为复杂的一个，针对的是过度效果的特效。
也可以自己制定过渡特效：cubic-bezier(number,number,number,number)。特定的贝塞尔曲线类型，4个数值需在[0,1]区间内。（贝塞尔曲线，有人也翻译为贝兹曲线）
