在 CSS 动画中从 height: 0 过渡到 height: auto 看起来应该很简单，但实际上 CSS 无法从 任何数值 过渡到 height: auto ，因为它需要一个具体的高度值来运行任何动画或过渡。在过去，开发者只能使用 JavaScript 来计算元素的高度并进行动画处理，这显然不是理想的解决方案。因此，CSS 终于引入了全新的 interpolate-size属性 和 calc-size() 函数，使这种类型的动画变得非常简单。

概述

CSS 新增的 interpolate-size 属性和 calc-size() 函数极大地增强了对内在尺寸关键字（如 auto、min-content、fit-content 等）的动画和过渡能力。这些工具的出现，使得不同尺寸之间的平滑动画成为可能，解决了网页开发者长期以来的痛点。

calc-size() 函数

calc-size() 函数的工作原理与 calc() 函数相同，但它增加了基于浏览器自动计算尺寸的能力。这些值包括：

• auto
• min-content
• max-content
• fit-content
• stretch
• contain

基本上，calc-size() 函数将诸如 auto 之类的值转换为特定的像素值，然后与其他值一起进行计算。这在动画自动调整大小的元素时特别有用。

例子：

.element {
  height: 0;
  overflow: hidden;
  transition: height 0.3s;
}

.element.open {
  height: calc-size(auto);
}

通过在 calc-size() 函数中包装 auto 值，可以在不使用任何 JavaScript 的情况下，从 0 过渡到 auto 高度。

需要注意的是，不能在两个自动计算的值之间进行动画，例如 auto 和 min-content 之间。

另一个有趣的方面是，只要在动画的某一个具体数值上使用 calc-size()，也能使动画生效。

比如：

.element {
  height: calc-size(0px);
  overflow: hidden;
  transition: height 0.3s;
}

.element.open {
  height: auto;
}

interpolate-size 属性

interpolate-size 属性允许对内在尺寸关键字进行动画和过渡。通过在根元素中指定 interpolate-size: allow-keywords，可以启用整个页面的新行为。这意味着可以不再依赖calc-size，全局使用新的过渡动画。

例子：

:root {
  interpolate-size: allow-keywords;
}
.element {
  height: 0px;
  overflow: hidden;
  transition: height 0.3s;
}
.element.open {
  height: auto;
}

计算

尽管上述情况是最常见的用例，但由于该函数与 calc() 函数的工作方式相同，它实际上可以用于进行以前在 CSS 中不可能进行的某些计算。

比如：

.element {
  width: calc-size(min-content, size + 50px);
}

上述 CSS 将元素的宽度设置为最小内容大小加 50 像素。语法可能有点复杂，所以进行解释：

calc-size() 接受两个参数，第一个是要计算的大小，第二个是要执行的计算。在这个例子中，计算元素的最小内容大小，然后加上 50 像素。关键字 size 始终表示传递给 calc-size 的第一个属性的当前大小。这意味着在这个例子中，size 等于元素的最小内容大小。

甚至可以嵌套多个 calc-size() 函数以进行更复杂的计算：

.element {
  width: calc-size(calc-size(min-content, size + 50px), size * 2);
}

这将计算元素的最小内容大小，加上 50 像素，然后将结果乘以 2。

浏览器支持

截至目前，calc-size() 仅在启用了 #enable-experimental-web-platform-features 标志的 Chrome 中受支持。还没有出现在 caniuse.com 上。

其他主流浏览器，例如火狐、Safari也已经开放了相应的Issues:

火狐： https://github.com/mozilla/standards-positions/issues/1022

Safari： https://github.com/WebKit/standards-positions/issues/348

相信明年的这个时候，主流浏览器应该都会支持吧。

相关链接

W3C： https://drafts.csswg.org/css-values-5/#calc-size