因为height: auto无法参与动画，浏览器需明确数值进行过渡。推荐使用max-height或JS获取scrollHeight实现流畅折叠展开效果。
在CSS中实现元素的折叠与展开动画，直接使用 animation 控制 height 看似简单，但实际操作中容易遇到问题。因为 height: auto 无法参与CSS动画过渡（transition 或 animation），导致无法平滑展开或收起内容。
为什么 height: auto 不支持动画？
CSS 动画需要明确的数值起点和终点。当高度从 0 到 auto 时，auto 是一个动态计算值，浏览器无法知道目标高度是多少，因此不能生成中间帧。
使用 max-height 模拟展开/折叠
一种常见解决方案是用 max-height 替代 height：
初始状态：设置 max-height: 0、overflow: hidden展开状态：设置一个足够大的 max-height（如 500px）配合 transition 实现平滑动画
立即学习“前端免费学习笔记（深入）”；
.collapsible { max-height: 0; overflow: hidden; transition: max-height 0.3s ease;}.collapsible.expanded {max-height: 500px; / 要大于内容实际高度 /}
这种方法简单有效，但缺点是如果 max-height 设置过大，动画时间会变长，即使内容很短。
使用 height + JS 获取真实高度
更精确的做法是结合 JavaScript 动态设置目标高度：
Reclaim.ai
为优先事项创建完美的时间表
90 查看详情 先设置元素可见但不可见（如 position: absolute; visibility: hidden）测量其 scrollHeight再应用该值到 height 并触发动画
立即学习“前端免费学习笔记（深入）”；
const content = document.querySelector('.content');const height = content.scrollHeight + 'px';// 展开content.style.height = height;
// 折叠content.style.height = '0';
CSS 配合：
.content { height: 0; overflow: hidden; transition: height 0.3s ease;}
使用 CSS @keyframes 动画的限制
若使用 @keyframes 实现 height 动画，仍需具体数值。例如：
@keyframes slideDown { from { height: 0; } to { height: 200px; } /* 必须是固定值 */}
这意味着它只适用于已知高度的内容，通用性差。
基本上就这些。想要流畅的折叠展开效果，推荐使用 max-height 方案快速实现，或结合 JS 动态读取高度实现更精准控制。关键点是理解 auto 无法动画，必须转换为具体数值。
以上就是在css中animation与height折叠展开的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/999819.html
微信扫一扫 
支付宝扫一扫 
