为高度添加动画效果：auto；（以及其他固有尺寸关键字）

使用 interpolate-size 属性或 calc-size() 函数可实现从长度到内在尺寸关键字的流畅过渡和动画效果，反之亦然。

Bramus

发布时间：2024 年 9 月 17 日

简介

一项经常被请求的 CSS 功能是能够对 height: auto 进行动画处理。该请求的一个细微变化是，转换 width 属性（而非 height），或者转换为 min-content、max-content 和 fit-content 等关键字表示的任何其他固有尺寸。

例如，在以下演示中，如果标签在用户悬停在图标上时能够以流畅的动画效果调整为自然宽度，将会非常棒。

使用的 CSS 如下所示：

nav a {
    width: 80px;
    overflow-x: clip;
    transition: width 0.35s ease; /* 👈 Transition the width */

    &:hover,
    &:focus-visible {
        width: max-content; /* 👈 Doesn't work with transitions */
    }
}

即使声明了 transition 来转换 width 属性，并在 :hover 上声明了 width: auto，也不会发生流畅的转换。而是突然发生变化。

使用 interpolate-size 在内在尺寸关键字之间进行动画过渡

浏览器支持

  • Chrome：129.
  • Edge：不受支持。
  • Firefox：不受支持。
  • Safari：不支持。

来源

通过 CSS interpolate-size 属性，您可以控制是否应允许 CSS 内在尺寸关键字的动画和过渡。

其默认值为 numeric-only，表示不启用插值。将该属性设置为 allow-keywords 后，如果浏览器可以为此类关键字添加动画效果，则可选择使用插值法从长度插值到 CSS 固有尺寸关键字。

按规范：

  • numeric-only：无法内插 <intrinsic-size-keyword>。
  • allow-keywords：如果其中一个值为 <intrinsic-size-keyword>，另一个值为 <length-percentage>，则可以对这两个值进行插值。[…]

由于 interpolate-size 属性是可继承的，因此您可以在 :root 上声明该属性，以便为整个文档启用从内在尺寸关键字转换到内在尺寸关键字的功能。这是推荐的方法。

/* Opt-in the whole page to interpolate sizes to/from keywords */
:root {
    interpolate-size: allow-keywords; /* 👈 */
}

在以下演示中，此规则已添加到代码中。因此，从 width: auto 到 width: auto 的动画会正常运行（在支持的浏览器中）：

通过缩小选择器来限制“选择接受”的覆盖面

如果您想仅在文档的子树中使用 allow-keywords 选项，请将选择器从 :root 调整为仅包含您要定位的元素。例如，如果网页的 <header> 与此类转场效果不兼容，您可以将选择启用此功能的范围限制为仅限 <main> 元素及其子元素，如下所示：

main { /* 👈 Scope the opt-in to only <main> and its descendants */
    interpolate-size: allow-keywords;
}

为什么默认不允许大小调整关键字的动画效果？

关于此“用户选择启用”机制的常见反馈是，浏览器应默认仅允许从内在尺寸关键字到长度的过渡和动画。

在开发此功能期间，我们研究了启用此行为的选项。工作组发现，默认启用此功能不向后兼容，因为许多样式表都假定内在尺寸关键字（例如 auto 或 min-content）无法进行动画处理。您可以在关于相关 CSS 工作组问题的此评论中找到详细信息。

因此，此属性是可选的。得益于其继承特性，选择启用整个文档只需在 :root 上声明 interpolate-size: allow-sizes，如前所述。

使用 calc-size() 在内在尺寸关键字之间进行动画过渡

浏览器支持

  • Chrome：129.
  • Edge：129。
  • Firefox：不支持。
  • Safari：不受支持。

来源

另一种实现插值到固有尺寸调整关键字的方法是使用 calc-size() 函数。它允许以安全且明确的方式对内在尺寸执行数学运算。

该函数接受两个参数，顺序如下：

  • calc-size 基准，可以是 <intrinsic-size-keyword>，也可以是嵌套的 calc-size()。
  • calc-size 计算，可让您使用 calc-size 基准执行计算。如需引用 calc-size 基准，请使用 size 关键字。

下面是一些示例：

width: calc-size(auto, size);        // = the auto width, unaltered
width: calc-size(min-content, size); // = the min-content width, unaltered

将 calc-size() 添加到原始演示中，代码如下所示：

nav a {
    width: 80px;
    overflow-x: clip;
    transition: width 0.35s ease;

    &:hover,
    &:focus-visible {
        width: calc-size(max-content, size); /* 👈 */
    }
}

从视觉上看，结果与使用 interpolate-size 时完全相同。因此，在这种特殊情况下，您应使用 interpolate-size。

calc-size() 的优势在于它能够进行计算，而使用 interpolate-size 无法做到这一点：

width: calc-size(auto, size - 10px); // = The auto width minus 10 pixels
width: calc-size(min-content, size + 1rem); // = The min-content width plus 1rem
width: calc-size(max-content, size * .5);   // = Half the max-content width

例如，如果您希望将页面上的所有段落的大小设为最接近 50px 的倍数，可以使用以下代码：

p {
    width: calc-size(fit-content, round(up, size, 50px));
    height: calc-size(auto, round(up, size, 50px));
}

calc-size() 还允许您在两个 calc-size() 之间插值，前提是这两个 calc-size() 的 calc-size 基准相同。这也是 interpolate-size 无法实现的。

#element {
    width: min-content; /* 👈 */
    transition: width 0.35s ease;

    &:hover {
        width: calc-size(min-content, size + 10px); /* 👈 */
    }
}

为什么不允许在 calc() 中使用 <intrinsic-size-keyword>？

calc-size() 经常会出现的一个问题是，CSS 工作组没有调整 calc() 函数来支持固有大小调整关键字。

造成这种情况的原因之一是，在计算时，不允许混搭使用固有尺寸限制的关键字。例如，您可能会想编写看起来有效的 calc(max-content - min-content)，但实际上它并不有效。calc-size() 会强制执行正确性检查，因为与 calc() 不同，它仅接受一个 <intrinsic-size-keyword> 作为第一个参数。

另一个原因是情境感知。某些布局算法对特定的固有尺寸关键字具有特殊行为。calc-size() 被明确定义为表示内在尺寸，而不是 <length>。因此，这些算法能够将 calc-size(<intrinsic-size-keyword>, …) 视为 <intrinsic-size-keyword>，从而保持对该关键字的特殊行为。

使用哪种方法？

在大多数情况下，请在 :root 上声明 interpolate-size: allow-keywords。这是启用从内在尺寸关键字到其他关键字的动画的最简单方法，因为它本质上就是一行代码。

/* Opt-in the whole page to animating to/from intrinsic sizing keywords */
:root {
    interpolate-size: allow-keywords; /* 👈 */
}

这段代码是一种很好的渐进式增强功能，因为不支持它的浏览器会回退到不使用转场。

当您需要对某些操作（例如执行计算）进行更精细的控制，或者想要使用只有 calc-size() 才能执行的行为时，可以使用 calc-size()。

#specific-element {
    width: 50px;

    &:hover {
        width: calc-size(fit-content, size + 1em); /* 👈 Only calc-size() can do this */
    }
}

不过，如果要在代码中使用 calc-size()，您需要为不支持 calc-size() 的浏览器添加回退。例如，添加额外的尺寸声明，或回退到使用 @supports 进行特征检测。

width: fit-content;
width: calc-size(fit-content, size + 1em);
       /* 👆 Browsers with no calc-size() support will ignore this second declaration,
             and therefore fall back to the one on the line before it. */

更多演示

下面是一些充分利用 interpolate-size: allow-keywords 优势的其他演示。

通知

以下演示是此 @starting-style 演示的分支。调整了代码，以允许添加不同高度的商品。

为此，整个网页都选择启用尺寸关键字插值，并且每个 .item 元素上的 height 都设置为 auto。否则，代码与创建分支之前完全相同。

:root {
    interpolate-size: allow-keywords; /* 👈 */
}

.item {
    height: auto; /* 👈 */

    @starting-style {
        height: 0px;
    }
}

为 <details> 元素添加动画

您希望使用此类插值的典型用例是，为展开式微件或独占折叠式动画化开启效果。在 HTML 中，您可以使用 <details> 元素来实现此目的。

借助 interpolate-size: allow-keywords，您可以实现很多功能：

@supports (interpolate-size: allow-keywords) {
    :root {
        interpolate-size: allow-keywords;
    }
    
    details {
        transition: height 0.5s ease;
        height: 2.5rem;
        
        &[open] {
            height: auto;
            overflow: clip; /* Clip off contents while animating */
        }
    }
}

不过，如您所见，动画仅在展开式微件打开时运行。为此，Chrome 正在开发 ::details-content 伪元素，该元素将于今年晚些时候在 Chrome 中发布（我们将在日后的文章中介绍该元素）。结合使用 interpolate-size: allow-keywords 和 ::details-content，您可以在两个方向上获取动画：