让宽高自动过渡动画不再那么繁琐！CSS新功能 interpolate-size 和 calc-size()
内容提要
CSS新增了interpolate-size属性和calc-size()函数，使得在动画和过渡中可以对内在尺寸关键字进行操作。calc-size()函数可以将像auto这样的值转换为像素值，从而实现从0过渡到auto高度。interpolate-size属性允许全局使用新的过渡动画。calc-size()函数还可以进行其他复杂的计算。目前，calc-size()只在Chrome中受支持，其他浏览器也在开发中。
延伸解读
calc-size() 与 interpolate-size 的适用场景
calc-size() 适合在单个元素或特定属性上使用，将 auto 等内在尺寸关键字转换为像素值，从而参与过渡或计算。interpolate-size 则通过在根元素设置 allow-keywords，全局启用对内在尺寸关键字的动画支持，无需逐个使用 calc-size()。两者都能解决从 0 到 auto 的过渡问题，但前者更灵活，后者更便捷。
使用 calc-size() 的注意事项
calc-size() 不能直接在两个自动计算的值之间进行动画，例如 auto 和 min-content 之间。但只需在动画的某一端使用 calc-size() 包裹具体数值，另一端使用 auto，即可实现过渡。此外，calc-size() 支持嵌套，可进行复杂计算，但语法稍显复杂，需理解 size 关键字代表第一个参数的大小。
浏览器支持现状与展望
目前 calc-size() 仅在启用了实验性功能的 Chrome 中受支持，尚未出现在 caniuse.com 上。Firefox 和 Safari 已开放相关议题，正在推进支持。文章预计明年主流浏览器可能都会支持。因此，在生产环境中使用时需考虑兼容性，或准备回退方案。
Q&A
CSS中的interpolate-size属性有什么作用？
interpolate-size属性允许对内在尺寸关键字进行动画和过渡，简化了动画处理。
calc-size()函数如何工作？
calc-size()函数将像auto等值转换为具体的像素值，支持复杂的尺寸计算。
calc-size()函数支持哪些尺寸关键字？
calc-size()函数支持auto、min-content、max-content、fit-content等尺寸关键字。
如何在CSS中实现从0过渡到auto高度？
可以使用calc-size(auto)来实现从0过渡到auto高度，而无需JavaScript。
目前calc-size()函数在哪些浏览器中受支持？
截至目前，calc-size()仅在启用了实验性功能的Chrome中受支持，其他浏览器正在开发中。
如何在全局启用新的过渡动画？
可以在根元素中指定interpolate-size: allow-keywords来全局启用新的过渡动画。
