calc-size: 一个解决浏览器11年的 bug的属性终于上线了

我们在平常写动画的时候，经常会遇到元素的高度 height：auto或者 100% 时，无法触发过渡动画效果。[1]

这是浏览器一直存在的问题，这个问题最早可以追溯到距今2013年，可以说是由来已久的问题了。

问题复现

我们先来复现一遍这个问题。

当我们将盒子的高度从 0 变成 auto 或者 100% 的时候， 盒子是没有过度动画的。显示得很生硬。

不过我们可以使用其他的方式去使得这个过渡动画生效，方法有很多，这里就不过多追溯了。

calc-size 插值计算属性

`calc-size`[2] 属性是一个最最新提出的属性, 和 calc 类似，都是可以计算的。现阶段还在一个草案阶段，但是浏览器已经有支持的计划了，预计在 chrome 129 版本就正式发布了。

如果要在浏览器中体验这个属性，可以在 chrome://flags/ 中开启 Experimental Web Platform features 进行体验

基础语法

<calc-size()> = calc-size( <calc-size-basis>, <calc-sum>? )

• calc-size-basis: 可以是 px、auto、max-content、percent 等等

• calc-sum：表示只可以进行 css 单位进行 相加、相减 操作

使用示例

通过使用 calc-size 属性计算高度的插值过程，这样就可以实现高度从 0 到 300px 的高度过渡变化。

interpolate-size 全局属性

`interpolate-size`[3] 可以让我们在根元素上设置插值计算的规则，这样针对整个页面都会生效。

interpolate-size 有两个值，一个是 allow-keywords 所有关键字，一个是仅限数字 numeric-only。

numeric-only

设置了这个属性之后，如果插值的属性值不是数字的话，就不会产生过渡的效果

只有设置了数字，过渡才会生效。

allow-keywords

设置了这个属性，只要是合法的属性值，都会插值计算，从而都会产生过渡效果。

小结

相信再过上一两年, calc-size支持计划[4]，我们就可以在浏览器中使用 cacl-size 插值计算属性了。到时候就不需要再用 hack 的方法处理过渡效果。

如果这篇文章对你有帮助，欢迎点赞、关注➕、转发 ✔ ！

参考资料

[1]问题: https://issues.chromium.org/issues/40339056

[2]calc-size: https://drafts.csswg.org/css-values-5/#funcdef-calc-size

[3]interpolate-size: https://github.com/WebKit/standards-positions/issues/348

[4]上一两年: https://chromestatus.com/feature/5196713071738880