height:200px
-webkit-transition:all 0.5s ease
-moz-transition:all 0.5s ease
-ms-transition:all 0.5s ease
-o-transition:all 0.5s ease
transition:all 0.5s ease
}
.div:hover{
height:auto
}
不知你的触发条件是什么，目前此动画在鼠标移入时触发
需求是有一些动态内容折叠起来的，点击后弹开
js定时器的动画过渡暂不考虑，于是就想到transition过渡
一开始就想着用trasition动画过渡就搞定啦，试了一下后，发现有问题
折叠的元素的高度height必须得设置一个值才可以有过渡的效果，要不就过渡不了
折中一下，就用js动态获取子元素的高度，然后给值到折叠的元素上实现过渡了
不过需要注意的是，内容的元素，虽然平常是不显示，但是还是暂据文本流的空间，所以缩起来后，要设置{visibility:hidden}.
打开时再设置{visibility:visible}
过渡是一种动画，是从一种状态过渡到另一种状态，在过渡前，浏览器会计算页面的新页面结构以及完成重绘，过渡会自动双向运行，因此只要状态一反转，反向动画就会被运行。如果我们不希望所有的元素属性受到影响，只希望作用到 box-shadow, transform ，那么可以改写为：
在指定带前缀的属性时， transition-property 本身也需要加上前缀。比如： transition: transform.25s 针对旧的版本，也就是WebKit浏览器，需要写成 -webkit-transition: -webkit-transform .25s ，即属性和作为值的属性均需要加上前缀，否则在旧版本的浏览器不起作用。
