这啥?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是渐进增强特性，兼容性良好。
➡️
