如何用纯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动画库也推荐下吧

期待解答，谢谢大家~