💡
原文中文，约2200字，阅读约需6分钟。
📝
内容提要
CSS新增了interpolate-size属性和calc-size()函数，使得在动画和过渡中可以对内在尺寸关键字进行操作。calc-size()函数可以将像auto这样的值转换为像素值，从而实现从0过渡到auto高度。interpolate-size属性允许全局使用新的过渡动画。calc-size()函数还可以进行其他复杂的计算。目前，calc-size()只在Chrome中受支持，其他浏览器也在开发中。
🎯
关键要点
- CSS新增了interpolate-size属性和calc-size()函数，简化了动画和过渡中的内在尺寸关键字操作。
- calc-size()函数可以将auto等值转换为像素值，实现从0过渡到auto高度。
- interpolate-size属性允许全局使用新的过渡动画，简化了对内在尺寸关键字的动画处理。
- calc-size()函数支持多种尺寸计算，包括auto、min-content、max-content等。
- calc-size()函数可以进行复杂计算，支持嵌套使用。
- 目前，calc-size()仅在Chrome中受支持，其他浏览器正在开发中。
❓
延伸问答
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来全局启用新的过渡动画。
🏷️
标签
➡️
