css:height为auto的transition过渡效果解决

项目要做一个动画,鼠标放在父元素上,白色线条和白色框列表动画伸展开,移开后动画收缩。针对列表展开效果,之前用过element-ui的collapse 展开折叠组件,以及自己写animation(overflow-y:hidden,height:0-100%)实现,但是均出现伸展到一半卡顿之后再完全伸展开的现象,后续使用will-change和开启3d加速试试,效果还有点不太好,后续使用transition,但是列表是动态的,height:auto,动画会显示默认高度,后续发现设置max-height:0--->200(大于所需最大高度的值),可以实现效果。仅为笔记记录问题
css:height为auto的transition过渡效果解决_第1张图片
css:height为auto的transition过渡效果解决_第2张图片

你可能感兴趣的:(css:height为auto的transition过渡效果解决)