css关于展开/收起动画 height overflow 高度100%无法产生动画问题

Question

使用vue项目中想通过高度变化对某块元素显示展开收起效果
由于是长列表, 所以数据为遍历出来的list, 设置一个默认高度比如50px, 当点击展开时高度展开为100%, 来回切换展开收起都产生动画效果

收起1的收起和展开为固定max-height 双向切换动画可以成功,
收起2设置展开时为100%时 切换动画单向无效
预览效果dome: http://jsrun.net/Yv3Kp/edit

Answer 1

这样可以实现，给active_3,加行position: absolute;
http://jsrun.net/fL3Kp/edit