【早阅】CSS手风琴动画指南

作者：@Bramus
原文：https://www.bram.us/2024/12/24/animatable-accordions-2024-11-27-devs-gent/

背景

在上个月的 devs.gent 十一月聚会上，Bramus 在最后一刻接替并发表了一场关于 “Animatable Accordions” 的演讲。这场演讲主要探讨了如何使用 CSS 的新特性来动画化 

要点

Bramus 的演讲展示了如何利用最新的 CSS 技术来实现可动画化的手风琴效果，特别是通过 

分析

技术细节

Bramus 的演讲基于最新的 CSS 规范，特别是 transition-behavior: allow-discrete 和 interpolate-size: allow-keywords 等属性。这些属性允许开发者对 

实际应用

传统上，将元素的尺寸动画化为 auto 是一个挑战。Bramus 介绍了两种新的 CSS 功能来解决这个问题：

1. interpolate-size: allow-keywords;

此属性允许内插内部尺寸关键字（如 auto，min-content，max-content 和 fit-content）与长度或百分比。

如果我们有时光机，这个属性就不需要存在了。它的存在是因为许多现有的样式表假设内部尺寸关键字不能动画化。

建议在根元素上指定 interpolate-size: allow-keywords，以便在整个页面上启用此新行为。

2. calc-size() 函数

calc-size() 函数允许对内部尺寸进行数学运算。它接受两个参数：calc-size-basis 和 calc-size-calculation。

calc-size() 函数允许以安全、定义明确的方式对内部尺寸执行数学运算。

calc-size-basis 可以是任何内部尺寸关键字或包含它的计算。calc-size-calculation 是使用 size 关键字执行的计算，该关键字在佈局计算期间会被 calc-size-basis 的原始尺寸替换。

calc-size() 提供比 interpolate-size 更大的灵活性，例如混合不同的内部尺寸关键字，并考虑上下文感知佈局算法。

选择哪种方法

Bramus 建议在大多数情况下使用 interpolate-size，因为它更简单易用。如果需要更複杂的计算或上下文感知，则应考虑使用 calc-size()。

1. 如何使手风琴动画化？

可以使用 CSS transition 属性为手风琴动画化。要制作动画，您需要设置要更改的属性（例如 height 或 width），持续时间，缓动函数和可选的延迟。

例如，要制作动画高度在 0.5 秒内从 0 变为 auto，可以使用以下 CSS：

 .accordion-content {
   height: 0;
   transition: height 0.5s ease;
 }

 .accordion-content.open {
   height: auto;
 }

2. 如何使用 interpolate-size 制作动画？

interpolate-size 属性允许您在内部大小关键字（如 auto、min-content、max-content 和 fit-content）和长度或百分比值之间进行动画处理。

要使用 interpolate-size，需要在要制作动画的元素或其父元素上将其设置为 allow-keywords。例如：

 :root {
   interpolate-size: allow-keywords;
 }

这将允许您对页面上的所有元素进行动画处理到 auto 或其他内部大小关键字。

3. 如何使用 calc-size () 制作动画？

calc-size() 函数允许您对内部大小执行数学运算。这在您需要将长度添加到内部大小或在两个 calc-size () 函数之间进行动画处理时很有用。

例如，要将 10px 添加到元素的最小内容宽度，可以使用以下 CSS：

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

4. ::details-content 伪元素是什麽？

::details-content 伪元素表示 

例如，要对 

 ::details-content {
   height: 0;
   transition: height 0.5s ease;
 }

 details[open]::details-content {
   height: auto;
 }

通过结合这些新属性，Bramus 展示了一个实际的代码示例，展示了如何创建一个可动画化的手风琴效果。这个示例不仅展示了技术的可行性，还为开发者提供了实际的代码参考。

Demo：https://codepen.io/bramus/pen/bGZbGZP

影响

对开发者的影响

随着 CSS 新特性的不断推出，开发者将有更多的工具来创建更复杂和流畅的动画效果。这不仅提高了用户体验，还简化了开发过程。

【第3437期】CSS ::target-text 用于文本高亮显示

对行业的影响

随着这些新特性的普及，前端开发的标准和实践可能会发生变化。开发者需要不断学习和适应这些新特性，以保持竞争力。

未来趋势

随着 CSS 的不断发展，我们可以预见更多的动画和交互特性将被引入，这将进一步提升 Web 应用的用户体验。

【第3430期】CSS 如何模拟“真实的”进度条？

结论

Bramus 的演讲不仅展示了最新的 CSS 技术，还为开发者提供了实际的代码示例和深入的资源链接。随着这些新特性的普及，开发者将有更多的工具来提升 Web 应用的用户体验。未来，我们可以期待更多的创新和改进，特别是在动画和交互设计方面。

😀 每天只需花五分钟即可阅读到的技术资讯，加入【早阅】共学，可联系 vx：zhgb_f2er

5 分钟新知：了解技术资讯的一种方式。

🚀可直接通过阅读原文了解详细内容。