纯css实现高度0-auto动画过度interpolate-size 和 height: calc-size(auto,size)

interpolate-size 属性

interpolate-size 是 CSS 中的一个属性，用于启用元素大小的动画和过渡，特别是从固定长度（如像素值）到内在大小关键字（如 auto、min-content、max-content 或 fit-content）之间的平滑变化。通常，默认情况下，CSS 动画无法直接从 height: 100px 过渡到 height: auto，因为 auto 不是一个可插值的数值。但通过设置 interpolate-size: allow-keywords，你可以允许这种插值，从而实现更平滑的动画效果。

语法：interpolate-size: numeric-only | allow-keywords;
- numeric-only：默认值，仅允许数值之间的插值。
- allow-keywords：允许关键字（如 auto）参与插值。

用法示例：

css 复制代码

.element {
  interpolate-size: allow-keywords;
  height: 0;
  transition: height 0.5s ease;
}

.element:hover {
  height: auto;  /* 现在可以平滑过渡到 auto 值 */
}

浏览器支持：这是一个较新的功能，Browser Support
Chrome: 129. ✅
Edge: 129. ✅
Firefox: not supported. ❌
Safari: not supported. ❌

calc-size() 函数

calc-size() 是 CSS 中的一个函数，用于对内在大小值（如 auto、fit-content 等）进行数学计算。它允许你基于一个基础大小（basis）来添加、减去或进行其他运算，从而生成一个新的大小值。这特别有用在响应式设计、容器查询或需要动态调整大小的场景中。

语法：calc-size(basis, calculation);
- basis：基础大小，可以是内在关键字（如 auto、min-content、max-content、fit-content、stretch）或长度值。
- calculation：计算表达式，如 basis + 10px、basis - 20%、clamp(100px, basis, 500px) 等。
用法示例 （针对 height: calc-size(auto, size)）：用户查询中的 "size" 可能是一个占位符或简写，指代计算表达式（如 basis + 10px）。假设这是 height: calc-size(auto, basis + 10px) 的变体，以下是一个实际例子：
css 复制代码
```
.element {
  height: calc-size(auto, basis + 10px);  /* 基于 auto 高度再加 10px */
}
```
这会计算元素的内在 auto 高度，然后在其基础上增加 10px。如果是动画，可以结合 interpolate-size 使用：
css 复制代码
```
.element {
  interpolate-size: allow-keywords;
  height: calc-size(auto, basis + 10px);
  transition: height 0.5s ease;
}

.element:hover {
  height: calc-size(auto, basis + 50px);  /* 平滑过渡到更大的计算高度 */
}
```
浏览器支持 ：类似于 interpolate-size，
Chrome: 129. ✅
Edge: 129. ✅
Firefox: not supported. ❌
Safari: not supported. ❌

两者结合使用

interpolate-size 和 calc-size() 经常一起使用，尤其在需要动画涉及内在大小的场景中。例如，calc-size() 可以生成一个基于 auto 的计算值，而 interpolate-size 确保从一个计算值到另一个的过渡是平滑的。这解决了长期以来 CSS 中动画 height: auto 的痛点。