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

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

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

问题复现

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

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

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

calc-size 插值计算属性

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