知识卡片

CSS对auto值做动画的绕过技巧

专业/工作 · 177

内容

CSS transition无法直接对height:auto做动画,因为浏览器不知道auto对应的具体像素值。Bootstrap折叠组件的解决办法是:展开时先把高度显式设成0,用scrollHeight取得内容的真实像素高度作为动画目标值,动画结束后再把高度改回auto以适应内容变化;收起时反过来,先把auto换算成当前像素值再动画到0。auto与像素值之间总要有一次”测量并显式赋值”的中转。

参考来源

《深入理解Bootstrap》第5章《JavaScript插件》