css设置height 由0到auto的动画效果

transition动画是将属性从初始值过度到结束值！
当你设置height 显示由 0 到 auto（由内容决定）， 隐藏由 auto（由内容决定） 到 0
实际上是没有结束值的因为css只能赋值，不能获取值auto， 内容的多少产生的高度是在css执行之后产生的，而不是css所赋值的所以transition获取不到最终的高度，所以没有效果，当然可以通过js实现，在这里就不做讨论，一下讨论的是纯css实现或者说较好实现。

css3 transition动画的一些限制，比如说一个高度为auto的div，你是不能够使用transition: height来生成平滑的伸展效果的，按照css3的说法，大概是只有固定值之间，可以，而设置auto自然是不可以的。

下面是解决替代方案重点内容

*用js获得高度（暂不考虑）
用transform实现；
用max-height实现；*

用transform实现是个很精巧的主意，我们知道transform中有scale的属性，可以变换一个元素的尺寸，所以将scale变换应用到transition中，
// transform: scale(1,0);
transform-origin: center top;
但对应的要设置中心点，而且有个问题是难以避免的，transform和relative的布局是一样的，不管你怎么变，你原来占据的空间是一直在那儿的。

此外，使用max-height吧。你会惊喜的发现max-height同样可以在transition中使用，配合overflow:hidden，给一个足够大的max-height，就能比较完美的模拟出height变化的效果了。当然，既然是“模拟”，总有些与正版的差距。稍微考虑下就能想到，如果我们真实的高度比max-height小，那max-height动画展示的时候，直到max-height与真实高度一致为止，你是看不到动画效果的。隐藏的时候便会有卡顿的效果。