使用固定高度配合 transition 可实现简单展开收起；2. 内容高度不确定时可用 max-height 模拟 auto 效果，结合 overflow: hidden 与过渡动画；3. 精确动画可通过 JS 动态获取 scrollHeight 并设置 height 目标值；4. 注意避免过大 max-height、确保重排触发并优化缓动函数，提升流畅性。
要实现元素高度变化的平滑过渡效果，关键在于正确使用 CSS transition 结合 height 属性。由于直接从
height: auto
到具体数值（或反之）无法触发平滑动画，需要一些技巧来绕过这个限制。
1. 使用固定高度配合 transition
最简单的方式是为元素设置明确的高度值，并在状态变化时通过类切换来触发动画。
示例：“`css.box { height: 0; overflow: hidden; transition: height 0.3s ease;}
.box.expanded {height: 200px; / 必须是具体数值 /}
JavaScript 控制类的添加与移除即可实现展开收起动画。
2. 模拟 auto 高度：使用 max-height
当内容高度不确定时，可利用 max-height 实现近似
说明：height: auto的效果。
- 将初始
max-height设为 0，隐藏内容 - 展开时设置一个足够大的
max-height（如 500px 或 1000px） - 配合
overflow: hidden防止内容溢出
3. 更精确的方法：JS 获取实际高度
若需真正基于内容高度动画，可在 JS 中动态读取元素的
scrollHeight
，然后设置目标
height
。
步骤：先设置元素可见但高度为 0在 DOM 更新后获取
element.scrollHeight
将该值设为
height
目标值并应用 transition
const el = document.querySelector('.content');el.style.height = 'auto';const targetHeight = el.scrollHeight + 'px';el.style.height = '0px';// 强制重排el.offsetHeight;// 开始动画el.style.height = targetHeight;
对应 CSS：
九歌
九歌–人工智能诗歌写作系统
322 查看详情
立即学习“前端免费学习笔记（深入）”；
.content { overflow: hidden; transition: height 0.3s ease;}
4. 注意事项与优化
确保动画流畅，避免性能问题。
始终搭配
overflow: hidden
防止内容突然暴露慎用过大的
max-height
，可能导致动画时间不自然transition 推荐使用
ease
或
cubic-bezier(0.4, 0, 0.2, 1)
获得更自然效果对复杂结构考虑使用
transform: scaleY()
替代，但会影响布局和交互
基本上就这些方法，选择取决于你是否知道内容高度以及是否接受近似方案。
以上就是如何通过css transition实现高度变化平滑效果的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1061434.html
微信扫一扫 
支付宝扫一扫 
