css3给我们带来了很多美好的东西，比如动画，再也不用使用jQuery来做低效的动画模拟了。不过想来大家也知道css3 transition动画的一些限制，比如说一个高度为auto的div，你是不能够使用transition: height来生成平滑的伸展效果的，按照css3的说法，大概是只有固定值之间，才能使用插帧什么的手段实现，总觉得这个说法有点儿牵强，浏览器难道不知道正常情况下的高度吗？
无奈，我遇到了这个问题，又不想动用js，只好剑走偏锋，想想主意了。
- 用js获得高度，暂不考虑；
- 用transform实现；
- 用max-height实现；
用transform实现是个很精巧的主意，我们知道transform中有scale的属性，可以变换一个元素的尺寸，所以将scale（或者直接scaleY，如果你只想改高度的话）变换应用到transition中，就能实现视觉上的高度变化啦~ 主意我使用了“视觉上”这三个字，因为你直接一试就明白了，transform和relative的布局是一样的，不管你怎么变，你原来占据的空间是一直在那儿的。所以很多时候这个用法并不怎么适用，另外还要记住transform变换的原点，免得中心缩放了。
无奈，使用max-height吧。你会惊喜的发现max-height同样可以在transition中使用，配合overflow:hidden，给一个足够大的max-height，就能比较完美的模拟出height变化的效果了。当然，既然是“模拟”，总有些与正版的差距。稍微考虑下就能想到，如果我们真实的高度比max-height小，那max-height动画展示的时候，直到max-height与真实高度一致为止，你是看不到动画效果的。所以…… 你懂的，收起来的时候感觉动画卡顿了一下，展开的时候倒还好~
我用max-height做了纯css的收缩效果，暂时工作的还好~
var $ele=$p.eq(rank);
$ele.css(‘height’,$ele.height()).transition({height:0},500);