如何用纯CSS动画实现slide down效果？

Question

用纯CSS动画实现slide down想过几种思路：1. 使用max-height top...配和transition设置定宽默认样式为.more {    -webkit-transition: max-height .35s ease-in-out;     -moz-transition: max-height .35s ease-in-out;    -o-transition: max-height .35s ease-in-out;    transition: max-height .35s ease-in-out;    max-height: 0;    overflow: hidden;}.more.active {    max-height: 1000px;}上面使用的固定的max-height，但是会影响动画效果，另外如果高度大于指定高度会显示不全，所以不能使用此方案。通过JS动态设置max-height之前尝试设置max-height:100%，但是无效。但是如何能够动态设置实际height为max-height是个问题，目前我是通过获取元素的scrollHeight来设置为max-height，实现动画效果，但是需要js操作是不特别爽，这样的话我不如直接使用js动画库了。目前我的实现代码（待改进）：https://jsfiddle.net/godtail/...2. 如果没好的方案就考虑使用js动画库来实现了。所以如果有合适的js动画库也推荐下吧期待解答，谢谢大家~