如何用css animation优化列表折叠展开动画-css教程-PHP中文网

核心思路是利用 max-height 结合 opacity 和 transform 实现流畅折叠展开动画，避免直接动画 height 引发重排。通过设置足够大的 max-height 值、配合 overflow: hidden 与关键帧动画，在无需精确计算高度的前提下实现性能友好的视觉效果。使用 opacity 实现淡入淡出，transform 应用 scaleY 或 translateY 增强动态感，由 GPU 加速提升流畅度。为优化动态内容场景，可结合 will-change 提示、合理缓动函数与动画时长，并在必要时通过 JavaScript 获取 scrollHeight 实现精准 height 过渡，或仅对列表项单独执行 opacity 和 transform 动画以规避容器尺寸变化带来的性能问题。

如何用css animation优化列表折叠展开动画

CSS

animation

登录后复制

在优化列表折叠展开动画时，核心思路是巧妙地利用

max-height

登录后复制

结合

opacity

登录后复制

和

transform

登录后复制

属性，通过关键帧（

@keyframes

登录后复制

）来精细控制动画的每个阶段，从而实现比单纯

transition

登录后复制

更富有表现力和性能更佳的效果。这样做不仅能让视觉上更流畅自然，还能在一定程度上规避直接动画

height

登录后复制

属性可能带来的性能问题。

解决方案

要用 CSS

animation

登录后复制

优化列表折叠展开，我们通常会避免直接动画

height

登录后复制

，因为它很容易触发浏览器重排（reflow），导致动画卡顿。一个更稳妥的策略是动画

max-height

登录后复制

，并辅以

opacity

登录后复制

和

transform

登录后复制

来增强视觉效果和性能。

具体来说，当列表需要折叠时，我们将

max-height

登录后复制

从一个足够大的值（足以包含所有内容）动画到

登录后复制

。展开时则反向操作。同时，配合

opacity

登录后复制

从

登录后复制

到

登录后复制

（折叠）或

登录后复制

到

登录后复制

（展开），让内容有淡入淡出的效果。更进一步，可以加入

transform: scaleY()

登录后复制

或

translateY()

登录后复制

来模拟内容的收缩或滑动，因为

transform

登录后复制

属性的动画通常由 GPU 处理，性能更好。

以下是一个基础的 CSS

animation

登录后复制

示例：

立即学习“前端免费学习笔记（深入）”；

/* 列表容器 */
.list-container {
  overflow: hidden;
  max-height: 1000px; /* 足够大的值，确保能容纳所有内容 */
  opacity: 1;
  transform-origin: top; /* 确保缩放从顶部开始 */
  animation-fill-mode: forwards; /* 动画结束后保持最终状态 */
  will-change: max-height, opacity, transform; /* 性能优化提示 */
}

/* 展开动画 */
.list-container.is-expanded {
  animation: expandList 0.4s ease-out forwards;
}

@keyframes expandList {
  0% {
    max-height: 0;
    opacity: 0;
    transform: scaleY(0.8) translateY(-10px);
  }
  100% {
    max-height: 1000px; /* 或根据实际内容估算一个更大的值 */
    opacity: 1;
    transform: scaleY(1) translateY(0);
  }
}

/* 折叠动画 */
.list-container.is-collapsed {
  animation: collapseList 0.4s ease-in forwards;
}

@keyframes collapseList {
  0% {
    max-height: 1000px;
    opacity: 1;
    transform: scaleY(1) translateY(0);
  }
  100% {
    max-height: 0;
    opacity: 0;
    transform: scaleY(0.8) translateY(-10px);
  }
}

/* 确保初始状态 */
.list-container.hidden-by-default {
  max-height: 0;
  opacity: 0;
  transform: scaleY(0.8) translateY(-10px);
}

登录后复制

通过 JavaScript 切换

.is-expanded

登录后复制

或

.is-collapsed

登录后复制

类名来触发动画。这种方式提供了一个相对平滑且性能友好的解决方案。

在列表折叠动画中，

max-height

登录后复制

和

height

登录后复制

的选择有何不同，以及如何避免动画卡顿？

在实现列表折叠展开动画时，

max-height

登录后复制

和

height

登录后复制

的选择确实是个值得深思的问题，它直接关系到动画的流畅度和性能。我个人经验是，如果不是对内容高度有绝对的掌控，或者内容高度是动态变化的，那么

max-height

登录后复制

几乎是首选。

height

登录后复制

属性的动画，理论上能实现最精确的尺寸变化。如果你能准确知道列表展开后的最终高度，并且这个高度是固定的，那么直接动画

height

登录后复制

从

登录后复制

到那个固定值，效果会非常完美。但问题在于，实际项目中列表内容往往是动态的，比如从后端接口加载数据，或者用户自定义内容，导致最终高度不确定。每次动画前都要用 JavaScript 计算

scrollHeight

登录后复制

，然后把这个值赋给

height

登录后复制

，这本身就增加了复杂性，而且频繁的

scrollHeight

登录后复制

读取和

height

登录后复制

赋值可能会导致浏览器强制重排，反而带来性能负担，甚至在动画开始前出现一帧的跳动。

相比之下，

max-height

登录后复制

的策略就显得“粗暴”而有效。我们给

max-height

登录后复制

设置一个足够大的值（比如

1000px

登录后复制

甚至

9999px

登录后复制

），只要这个值大于任何可能出现的实际内容高度，列表就能完全展开。动画时，从

登录后复制

动画到这个大值，或者从大值动画到

登录后复制

。它的优点是：

无需精确计算高度： 极大地简化了逻辑，减少了 JavaScript 的介入。
性能相对友好： 结合
```
overflow: hidden
```
登录后复制
，浏览器在动画
```
max-height
```
登录后复制
时，通常不需要像动画
```
height
```
登录后复制
那样频繁地进行布局计算，尤其是在内容实际高度远小于
```
max-height
```
登录后复制
的情况下，动画过程中的布局变化相对较少。

然而，

max-height

登录后复制

也有其缺点。如果实际内容高度远小于你设置的

max-height

登录后复制

，动画会显得有些“空洞”，比如内容只有

50px

登录后复制

高，但动画

max-height

登录后复制

从

登录后复制

到

1000px

登录后复制

却要持续

0.4s

登录后复制

，用户会觉得动画时间过长，内容出现后还有一段“空白”时间。

为了避免动画卡顿，无论选择

height

登录后复制

还是

max-height

登录后复制

，都需要注意以下几点：

利用
overflow: hidden
登录后复制
：这是
```
max-height
```
登录后复制
动画的关键。它能剪裁超出容器的内容，防止在动画过程中出现滚动条或内容溢出。
动画非布局属性： 优先动画
```
opacity
```
登录后复制
和
```
transform
```
登录后复制
（如
```
scaleY
```
登录后复制
、
```
translateY
```
登录后复制
）。这些属性的变化不会触发布局或绘制，而是直接在合成层（compositor layer）上进行，由 GPU 加速，性能极佳。即使
```
max-height
```
登录后复制
动画本身会引起一些布局变化，通过
```
opacity
```
登录后复制
和
```
transform
```
登录后复制
的辅助，也能在视觉上掩盖一部分卡顿感。
使用
will-change
登录后复制
：这是一个性能优化提示。在动画元素上设置
```
will-change: max-height, opacity, transform;
```
登录后复制
可以告诉浏览器，这些属性即将发生变化，让浏览器提前进行优化准备。但要谨慎使用，过度使用反而可能消耗更多内存。
合理的动画时长和缓动函数： 通常
```
200ms
```
登录后复制
到
```
400ms
```
登录后复制
是一个比较舒适的动画时长。选择合适的
```
ease-in
```
登录后复制
、
```
ease-out
```
登录后复制
或
```
ease-in-out
```
登录后复制
缓动函数，能让动画感觉更自然，避免突兀。
避免在动画进行中修改 DOM： 在动画过程中，尽量避免对列表项进行添加、删除或修改操作，这会强制浏览器重新计算布局，导致动画中断或卡顿。

总的来说，对于大多数动态列表折叠场景，

max-height

登录后复制

配合

overflow: hidden

登录后复制

、

opacity

登录后复制

和

transform

登录后复制

是一个更实用且性能表现良好的方案。如果对动画效果有极致要求，且内容高度固定或可预测，才考虑用 JavaScript 精确控制

height

登录后复制

。

如何结合

opacity

登录后复制

和

transform

登录后复制

属性，创造更平滑自然的折叠展开效果？

仅仅动画

max-height

登录后复制

可能会让折叠展开显得有些生硬，或者出现前面提到的“空洞感”。结合

opacity

登录后复制

和

transform

登录后复制

属性，就能为动画注入更多生命力，使其看起来更平滑、更自然，甚至带有一些微小的“物理”反馈。这不仅仅是美观问题，也是一种用户体验的优化，因为更自然的动画能减少用户的认知负荷。

我个人在做这类动画时，几乎都会同时考虑这三个属性的组合。

opacity

登录后复制

的运用：

opacity

登录后复制

的作用是让内容在折叠时逐渐淡出，展开时逐渐淡入。这能很好地掩盖

max-height

登录后复制

动画过程中可能出现的生硬感，尤其是当

max-height

登录后复制

的值远大于实际内容高度时，

opacity

登录后复制

的渐变能让用户觉得内容是“消失”或“出现”的，而不是简单地被“切掉”或“显示”。

展开动画 (
expandList
登录后复制
)：
```
opacity
```
登录后复制
从
```
0
```
登录后复制
渐变到
```
1
```
登录后复制
。在
```
max-height
```
登录后复制
开始增长的同时，内容也开始变得可见。
折叠动画 (
collapseList
登录后复制
)：
```
opacity
```
登录后复制
从
```
1
```
登录后复制
渐变到
```
0
```
登录后复制
。在
```
max-height
```
登录后复制
开始减小的同时，内容也逐渐变得透明直至消失。

transform

登录后复制

的妙用：

爱图表

AI驱动的智能化图表创作平台

查看详情

transform

登录后复制

属性是 CSS 动画的利器，因为它能直接作用于元素的合成层，不触发布局和绘制，性能极高。在折叠展开动画中，

scaleY

登录后复制

和

translateY

登录后复制

是常用的两个

transform

登录后复制

函数。

```
transform: scaleY()
```
登录后复制
(垂直缩放)：
- 可以模拟内容从顶部或底部被“挤压”或“拉伸”的感觉。
- 展开动画：
```
scaleY
```
  登录后复制
  可以从
```
0.8
```
  登录后复制
  （略微压缩）或
```
0
```
  登录后复制
  （完全扁平）渐变到
```
1
```
  登录后复制
  。配合
```
transform-origin: top;
```
  登录后复制
  （或
```
bottom
```
  登录后复制
  ），能让缩放效果从指定方向开始。例如，从
```
scaleY(0.8)
```
  登录后复制
  渐变到
```
scaleY(1)
```
  登录后复制
  ，能给内容一种“弹入”的轻微弹性感。
- 折叠动画：
```
scaleY
```
  登录后复制
  从
```
1
```
  登录后复制
  渐变到
```
0.8
```
  登录后复制
  或
```
0
```
  登录后复制
  。
- 注意： 直接对文本或图片进行
```
scaleY
```
  登录后复制
  可能会导致内容变形，所以通常我们会对包裹列表项的容器进行
```
scaleY
```
  登录后复制
  。
```
transform: translateY()
```
登录后复制
(垂直位移)：
- 可以模拟内容在折叠时向上“滑出”视线，展开时向下“滑入”视线。
- 展开动画：
```
translateY
```
  登录后复制
  可以从
```
10px
```
  登录后复制
  （略低于最终位置）或
```
-10px
```
  登录后复制
  （略高于最终位置）渐变到
```
0
```
  登录后复制
  。例如，从
```
translateY(-10px)
```
  登录后复制
  渐变到
```
translateY(0)
```
  登录后复制
  ，能让内容有一种从上方“落入”的感觉。
- 折叠动画：
```
translateY
```
  登录后复制
  从
```
0
```
  登录后复制
  渐变到
```
10px
```
  登录后复制
  或
```
-10px
```
  登录后复制
  。

组合示例：

在解决方案部分给出的

keyframes

登录后复制

示例中，我已经结合了这三个属性：

@keyframes expandList {
  0% {
    max-height: 0;
    opacity: 0;
    transform: scaleY(0.8) translateY(-10px); /* 略微压缩并向上偏移 */
  }
  100% {
    max-height: 1000px;
    opacity: 1;
    transform: scaleY(1) translateY(0); /* 完全展开并回到原位 */
  }
}

@keyframes collapseList {
  0% {
    max-height: 1000px;
    opacity: 1;
    transform: scaleY(1) translateY(0);
  }
  100% {
    max-height: 0;
    opacity: 0;
    transform: scaleY(0.8) translateY(-10px); /* 略微压缩并向上偏移 */
  }
}

登录后复制

这里，

max-height

登录后复制

负责主要的高度变化，

opacity

登录后复制

负责淡入淡出，而

transform: scaleY(0.8) translateY(-10px)

登录后复制

则为展开动画的起始和折叠动画的结束提供了一个“微小”的动态效果。内容在出现时，会先略微压缩并从上方一点点“滑入”；在消失时，则会略微压缩并向上方“滑出”。这种细微的调整能让整个动画过程看起来更富有弹性，更符合我们对物理世界的直觉，从而带来更平滑、更自然的视觉体验。

在实际项目中，如何处理动态内容或列表项数量不确定的情况下的动画优化？

实际项目中，动态内容和不确定数量的列表项是常态，这确实给 CSS 动画带来了一些挑战。纯 CSS

max-height

登录后复制

方案虽然简洁，但在这种情况下可能会遇到一些“不完美”的地方。在我看来，处理这类问题，往往需要结合 CSS 和 JavaScript，或者更巧妙地利用 CSS 本身的特性。

max-height

登录后复制

的“估值”与“妥协”：

前面提到，

max-height

登录后复制

的一个问题是如果设置过大，动画时间会感觉“空洞”。对于动态内容，我们无法预知确切高度，所以设置一个足够大的

max-height

登录后复制

值是必须的。

估算最大值： 如果能大致预估列表的最大可能高度（比如最多
```
N
```
登录后复制
个列表项，每个项平均高度
```
X
```
登录后复制
，那么
```
max-height
```
登录后复制
可以设为
```
N * X + padding
```
登录后复制
），这能让动画在大多数情况下看起来比较合理。但总会有超出预期的情况。
接受“空洞”： 有时，为了纯 CSS 方案的简洁和性能，我们需要接受
```
max-height
```
登录后复制
动画可能带来的轻微“空洞”感。通过
```
opacity
```
登录后复制
和
```
transform
```
登录后复制
的配合，可以很好地掩盖这种不足，让用户感知到的流畅度更高。

2. JavaScript 辅助获取精确高度（“混合式”方案）：

这是解决动态内容高度不确定性最有效的方法，虽然牺牲了一部分纯 CSS 的优雅，但能带来最精确的动画效果。

基本思路：
1. 列表初始状态
```
height: 0; overflow: hidden;
```
  登录后复制
2. 当需要展开时：
  - 将
```
height
```
    登录后复制
    暂时设置为
```
auto
```
    登录后复制
    ，让浏览器计算出实际的
```
scrollHeight
```
    登录后复制
    。
  - 立即将
```
height
```
    登录后复制
    设置回
```
0
```
    登录后复制
    。
  - 强制浏览器重绘（例如通过读取
```
offsetHeight
```
    登录后复制
    ），确保
```
height: 0
```
    登录后复制
    状态被渲染。
  - 将
```
height
```
    登录后复制
    设置为刚刚获取到的
```
scrollHeight
```
    登录后复制
    值，并应用
```
transition
```
    登录后复制
    。
3. 动画结束后，将
```
height
```
  登录后复制
  设置为
```
auto
```
  登录后复制
  ，以适应未来内容变化。
4. 折叠时，则反向操作：获取当前
```
scrollHeight
```
  登录后复制
  ，设置
```
height
```
  登录后复制
  为该值，然后
```
transition
```
  登录后复制
  到
```
height: 0
```
  登录后复制
  。

代码示例（简化版）：

function toggleList(element) {
  if (element.style.height && element.style.height !== '0px') {
    // 正在展开或已展开，准备折叠
    element.style.height = element.scrollHeight + 'px'; // 确保从当前高度开始折叠
    requestAnimationFrame(() => {
      element.style.height = '0';
    });
  } else {
    // 正在折叠或已折叠，准备展开
    element.style.height = 'auto'; // 临时设置为auto获取实际高度
    const scrollHeight = element.scrollHeight;
    element.style.height = '0'; // 立即设回0
    requestAnimationFrame(() => { // 确保浏览器已经渲染了height:0
      element.style.height = scrollHeight + 'px';
    });
  }

  // 动画结束后移除height属性，让其自适应
  element.addEventListener('transitionend', () => {
    if (element.style.height !== '0px') {
      element.style.height = 'auto';
    }
  }, { once: true });
}

// CSS
// .list-container {
//   overflow: hidden;
//   transition: height 0.4s ease-in-out;
// }
// .list-container[style="height: 0px;"] {
//   height: 0;
// }

登录后复制

这种方案虽然需要 JavaScript 介入，但它能提供最精确、最流畅的动画，尤其适合内容高度差异大且不可预测的场景。

3. 仅动画列表项，而非容器高度：

对于列表项数量不确定，但每个列表项高度相对固定的情况，可以考虑不动画列表容器的