【早阅】Chrome 129新功能：实现元素从固定值到auto的平滑过渡

作者：@Chris Coyier
原文：https://frontendmasters.com/blog/arrival-of-animate-to-auto/

背景

最近，Chrome 129 版本中引入了一项新功能，允许开发者通过 CSS 实现元素高度从固定值到自动值的平滑过渡动画。这一功能是通过 interpolate-size 属性实现的，目前已经在 Chrome 中默认启用，无需特殊标志。

要点

Chrome 129 支持通过 CSS 实现元素高度从固定值到自动值的平滑过渡动画，这一功能对于提升用户体验和界面交互性具有重要意义。

分析

1、技术实现：该功能通过 interpolate-size 属性实现，允许 height、inline-size 等属性在 auto、min-content、max-content 和 fit-content 之间进行插值过渡。例如，当用户悬停或聚焦某个元素时，元素的高度可以从固定值平滑过渡到自动值，从而实现更自然的动画效果。

2、代码示例：

 html {
   interpolate-size: allow-keywords;
 }
 .el {
   inline-size: 80px;
   overflow-x: clip;
   transition: inline-size 0.35s ease;
   &:hover,
   &:focus-visible {
     inline-size: max-content;
     inline-size: calc-size(max-content, size);
   }
 }

在这个示例中，当用户悬停或聚焦 .el 元素时，元素的宽度会从 80px 平滑过渡到 max-content，从而实现动画效果。

Growing buttons on hover (before)：https://codepen.io/web-dot-dev/pen/MWMMbJp

3、实际应用：这一功能可以应用于多种场景，如列表项的动态添加和删除、手风琴菜单的展开和收起、以及各种需要动态调整高度的界面元素。特别是对于菜单等需要频繁展开和收起的元素，这一功能可以显著提升用户体验。

影响

1. 用户体验提升：通过平滑的动画过渡，用户可以更直观地感知界面的变化，从而提升整体的用户体验。

2. 开发者效率：开发者无需编写复杂的 JavaScript 代码来实现类似效果，只需通过简单的 CSS 属性即可实现，从而提高了开发效率。

3. 行业趋势：随着浏览器对 CSS 动画支持的不断提升，未来可能会有更多类似的 CSS 功能被引入，从而进一步推动前端开发的发展。

结论

Chrome 129 引入的 interpolate-size 属性为开发者提供了一种简单而强大的工具，用于实现元素高度从固定值到自动值的平滑过渡动画。这一功能不仅提升了用户体验，还简化了开发流程。随着更多浏览器开始支持类似功能，未来前端开发将更加注重通过 CSS 实现复杂的动画效果，从而推动整个行业的发展。

早阅：了解技术资讯的一种方式。