方法一：max-height 模拟法
核心原理：
用固定的超大 max-height 替代 height: auto，配合 height: 0 + overflow: hidden 实现动画。
- 收起状态：
height: 0; max-height: 0;（元素完全隐藏） - 展开状态：
height: auto; max-height: [足够大的数值];（元素自适应高度，动画由 max-height 完成）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>height 0→auto 动画（max-height版）</title>
<style>
/* 动画容器核心样式 */
.box {
width: 300px;
background: #f0f7ff;
border: 1px solid #409eff;
border-radius: 6px;
/* 核心1：隐藏溢出内容，否则收起时内容会外露 */
overflow: hidden;
/* 核心2：设置过渡动画，作用于max-height */
transition: max-height 0.3s ease-in-out;
/* 收起状态：高度0、最大高度0 */
height: 0;
max-height: 0;
}
/* 展开状态（添加active类触发） */
.box.active {
height: auto; /* 恢复自适应高度 */
max-height: 1000px; /* 设为比内容最大高度大的值即可 */
}
/* 触发按钮样式（辅助） */
.toggle-btn {
margin: 20px 0;
padding: 8px 16px;
cursor: pointer;
background: #409eff;
color: white;
border: none;
border-radius: 4px;
}
</style>
</head>
<body>
<button class="toggle-btn" onclick="document.querySelector('.box').classList.toggle('active')">
点击展开/收起
</button>
<div class="box">
<div style="padding: 16px;">
这是自适应高度的内容<br>
内容可以任意多少行<br>
高度会自动跟随内容变化<br>
展开/收起都有平滑动画 ✅
</div>
</div>
</body>
</html>注意事项：
max-height值建议设为 页面中元素可能的最大高度（如500px/1000px），只要超过内容实际高度即可，不影响动画效果- 动画时长和
max-height匹配：如果max-height设得很大（如2000px），建议把过渡时长调至0.5s，避免动画 “卡顿感”
方法二：JS+CSS 精准计算
核心原理：
如果追求绝对精准、无延迟的动画效果，用 JS 实时计算元素「真实内容高度」，再配合 CSS transition 过渡，完美解决 auto 不支持动画的问题。
- 收起状态：CSS 固定
height: 0+overflow: hidden - 展开时：JS 获取元素的
scrollHeight（真实内容高度），赋值给height - 收起时：JS 再把
height重置为0
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>height 0→auto 动画（JS精准版）</title>
<style>
/* 动画容器核心样式 */
.box {
width: 300px;
background: #f0f7ff;
border: 1px solid #409eff;
border-radius: 6px;
overflow: hidden;
/* 核心：过渡动画作用于height，时长自定义 */
transition: height 0.3s ease-in-out;
/* 初始收起状态 */
height: 0;
}
/* 触发按钮样式（辅助） */
.toggle-btn {
margin: 20px 0;
padding: 8px 16px;
cursor: pointer;
background: #67c23a;
color: white;
border: none;
border-radius: 4px;
}
</style>
</head>
<body>
<button class="toggle-btn" onclick="toggleBox()">点击展开/收起</button>
<div class="box" id="animateBox">
<div style="padding: 16px;">
JS精准计算高度 ✨<br>
动画无延迟、无卡顿<br>
适配任意内容高度<br>
极致丝滑体验
</div>
</div>
<script>
const box = document.getElementById('animateBox');
let isOpen = false; // 标记展开/收起状态
function toggleBox() {
if (!isOpen) {
// ✅ 展开：赋值真实内容高度 scrollHeight
box.style.height = box.scrollHeight + 'px';
isOpen = true;
} else {
// ✅ 收起：重置高度为0
box.style.height = '0';
isOpen = false;
}
}
</script>
</body>
</html>
看不懂