核心思路是利用 max-height 结合 opacity 和 transform 实现流畅折叠展开动画，避免直接动画 height 引发重排。通过设置足够大的 max-height 值、配合 overflow: hidden 与关键帧动画，在无需精确计算高度的前提下实现性能友好的视觉效果。使用 opacity 实现淡入淡出，transform 应用 scaleY 或 translateY 增强动态感，由 GPU 加速提升流畅度。为优化动态内容场景，可结合 will-change 提示、合理缓动函数与动画时长，并在必要时通过 JavaScript 获取 scrollHeight 实现精准 height 过渡，或仅对列表项单独执行 opacity 和 transform 动画以规避容器尺寸变化带来的性能问题。
CSS
animation
在优化列表折叠展开动画时，核心思路是巧妙地利用
max-height
结合
opacity
和
transform
属性，通过关键帧（
@keyframes
）来精细控制动画的每个阶段，从而实现比单纯
transition
更富有表现力和性能更佳的效果。这样做不仅能让视觉上更流畅自然，还能在一定程度上规避直接动画
height
属性可能带来的性能问题。
解决方案
要用 CSS
animation
优化列表折叠展开，我们通常会避免直接动画
height
，因为它很容易触发浏览器重排（reflow），导致动画卡顿。一个更稳妥的策略是动画
max-height
，并辅以
opacity
和
transform
来增强视觉效果和性能。
具体来说，当列表需要折叠时，我们将
max-height
从一个足够大的值（足以包含所有内容）动画到
0
。展开时则反向操作。同时，配合
opacity
从
1
到
0
（折叠）或
0
到
1
（展开），让内容有淡入淡出的效果。更进一步，可以加入
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
从
0
到那个固定值，效果会非常完美。但问题在于，实际项目中列表内容往往是动态的，比如从后端接口加载数据，或者用户自定义内容，导致最终高度不确定。每次动画前都要用 JavaScript 计算
scrollHeight
，然后把这个值赋给
height
，这本身就增加了复杂性，而且频繁的
scrollHeight
读取和
height
赋值可能会导致浏览器强制重排，反而带来性能负担，甚至在动画开始前出现一帧的跳动。
相比之下，
max-height
的策略就显得“粗暴”而有效。我们给
max-height
设置一个足够大的值（比如
1000px
甚至
9999px
），只要这个值大于任何可能出现的实际内容高度，列表就能完全展开。动画时，从
0
动画到这个大值，或者从大值动画到
0
。它的优点是：
无需精确计算高度： 极大地简化了逻辑，减少了 JavaScript 的介入。性能相对友好： 结合
overflow: hidden
，浏览器在动画
max-height
时，通常不需要像动画
height
那样频繁地进行布局计算，尤其是在内容实际高度远小于
max-height
的情况下，动画过程中的布局变化相对较少。
然而，
max-height
也有其缺点。如果实际内容高度远小于你设置的
max-height
，动画会显得有些“空洞”，比如内容只有
50px
高，但动画
max-height
从
0
到
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
属性，就能为动画注入更多生命力，使其看起来更平滑、更自然，甚至带有一些微小的“物理”反馈。这不仅仅是美观问题，也是一种用户体验的优化，因为更自然的动画能减少用户的认知负荷。
我个人在做这类动画时，几乎都会同时考虑这三个属性的组合。
1.
opacity
的运用：
opacity
的作用是让内容在折叠时逐渐淡出，展开时逐渐淡入。这能很好地掩盖
max-height
动画过程中可能出现的生硬感，尤其是当
max-height
的值远大于实际内容高度时，
opacity
的渐变能让用户觉得内容是“消失”或“出现”的，而不是简单地被“切掉”或“显示”。
展开动画 (
expandList
)：
opacity
从
0
渐变到
1
。在
max-height
开始增长的同时，内容也开始变得可见。折叠动画 (
collapseList
)：
opacity
从
1
渐变到
0
。在
max-height
开始减小的同时，内容也逐渐变得透明直至消失。
2.
transform
的妙用：
绘蛙AI修图
绘蛙平台AI修图工具，支持手脚修复、商品重绘、AI扩图、AI换色
285 查看详情
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 本身的特性。
1.
max-height
的“估值”与“妥协”：
前面提到，
max-height
的一个问题是如果设置过大，动画时间会感觉“空洞”。对于动态内容，我们无法预知确切高度，所以设置一个足够大的
max-height
值是必须的。
估算最大值： 如果能大致预估列表的最大可能高度（比如最多
N
个列表项，每个项平均高度
X
，那么
max-height
可以设为
N * X + padding
），这能让动画在大多数情况下看起来比较合理。但总会有超出预期的情况。接受“空洞”： 有时，为了纯 CSS 方案的简洁和性能，我们需要接受
max-height
动画可能带来的轻微“空洞”感。通过
opacity
和
transform
的配合，可以很好地掩盖这种不足，让用户感知到的流畅度更高。
2. JavaScript 辅助获取精确高度（“混合式”方案）：
这是解决动态内容高度不确定性最有效的方法，虽然牺牲了一部分纯 CSS 的优雅，但能带来最精确的动画效果。
基本思路：
列表初始状态
height: 0; overflow: hidden;
当需要展开时：将
height
暂时设置为
auto
，让浏览器计算出实际的
scrollHeight
。立即将
height
设置回
0
。强制浏览器重绘（例如通过读取
offsetHeight
），确保
height: 0
状态被渲染。将
height
设置为刚刚获取到的
scrollHeight
值，并应用
transition
。动画结束后，将
height
设置为
auto
，以适应未来内容变化。折叠时，则反向操作：获取当前
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. 仅动画列表项，而非容器高度：
对于列表项数量不确定，但每个列表项高度相对固定的情况，可以考虑不动画列表容器的
height
或
max-height
，而是动画列表项自身的
opacity
和
transform
。
思路： 容器的高度会瞬间变化，但内部的列表项会优雅地淡入淡出或滑动进入/离开。实现：列表
以上就是如何用css animation优化列表折叠展开动画的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1071030.html
微信扫一扫 
支付宝扫一扫 
