从/到“auto”的 CSS 动画

Avatar of Chris Coyier
Chris Coyier

DigitalOcean 为您的每个旅程阶段提供云产品。立即开始使用 $200 免费积分!

我毫不怀疑 CSS 将有一天允许这样做,但现在,您无法将元素的宽度或高度从固定值动画到自动。当需要从隐藏动画到可见(如 jQuery 的 slideDown())时,这特别有用。Nikita Vasilyev 展示了如何使用一点 JS 来做到这一点,但仍然使用 CSS 进行实际的动画/过渡。

更难的是“到”自动:1) 测量宽度 2) 设置自动 3) 再次测量 4) 恢复到之前的值 5) 强制重绘 6) 应用过渡 7) 将宽度更改为测量的自动值 8) 将其设置为真正的自动。 #wipesbrow

当然,还有 max-height/width 技术,但我不是粉丝。它会弄乱过渡时间,并且需要魔术数字。

直接链接 →