这啥?CSS calc-size和interpolate-size,真学不动了
💡
原文中文，约4000字，阅读约需10分钟。
📝
内容提要
本文介绍了CSS中的calc-size()函数和interpolate-size属性，允许在值为auto时对width、height等尺寸属性进行过渡动画。calc-size()用于单独设置，而interpolate-size可全局应用。这两个特性自Chrome 129版本起支持，文章还讨论了它们的使用案例和兼容性问题。
🎯
关键要点
- calc-size()函数和interpolate-size属性允许width、height等尺寸属性在值为auto时进行过渡动画。
- calc-size()用于单独设置，而interpolate-size可全局应用。
- 这两个特性自Chrome 129版本起支持。
- calc-size()函数可以实现height:auto的过渡动画效果。
- interpolate-size属性可以在祖先容器上设置，简化height:auto的过渡动画实现。
- calc-size()函数支持多种计算方式，如单值设置和函数计算。
- calc-size()和interpolate-size仅适用于与尺寸相关的CSS属性。
- display:none的动画问题可以通过transition-behavior属性和@starting-style规则解决。
- calc-size()和interpolate-size是渐进增强特性，兼容性良好。
❓
延伸问答
calc-size()函数的主要功能是什么？
calc-size()函数允许在CSS中对width、height等尺寸属性进行过渡动画，即使它们的值为auto。
interpolate-size属性如何简化height:auto的过渡动画？
interpolate-size属性可以在祖先容器上设置，从而全局允许height:auto的过渡动画，无需单独使用calc-size()。
这两个特性从哪个版本的Chrome开始支持？
calc-size()函数和interpolate-size属性自Chrome 129版本起支持。
calc-size()函数支持哪些计算方式？
calc-size()函数支持单值设置和函数计算，如calc-size(auto, size)和calc-size(min-content, size + 100px)。
calc-size()和interpolate-size适用于哪些CSS属性？
这两个特性仅适用于与尺寸相关的CSS属性，如width和height等。
如何解决display:none的动画问题？
可以使用transition-behavior属性和@starting-style规则来解决display:none的动画问题。
➡️
