max-height: 0 → auto 过渡失效因 auto 不可动画；解决方法是用 sass 预设语义化高度变量（如 $panel-height-md）配合 mixin 实现精准过渡，内容不可预知时需 js 读取 scrollheight 动态设置。
为什么直接用 max-height: 0 → max-height: auto 做过渡会失效
因为 auto 不是可动画的值，浏览器无法插值计算中间状态，过渡会直接跳变。常见表现是：展开时立刻显示内容，收起时“啪”一下消失，没有渐变效果。
解决思路是用一个足够大的固定 max-height 值代替 auto，让 CSS 能线性过渡。但写死比如 500px 容易出问题——内容超长时被截断，内容很短时动画拖沓。
Sass 的价值就在这里：在编译时动态算出每个面板内容的真实高度，生成精准的过渡上下界。
用 Sass calc() + content-height 变量模拟动态高度（不依赖 JS）
纯 Sass 无法运行时测量 DOM 高度，所以「动态」是伪动态——需你提前知道或估算各面板内容块的最大可能高度。实际做法是为不同类别面板定义语义化高度变量：
-
$panel-height-sm: 120px（如仅 2 行文字） -
$panel-height-md: 280px（如含列表+图片） -
$panel-height-lg: 600px（如长表单）
再用 @mixin 封装过渡逻辑：
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
@mixin accordion-transition($height) {
max-height: 0;
opacity: 0;
overflow: hidden;
transition: max-height 0.3s ease-in-out, opacity 0.2s ease-in-out;
&.is-open {
max-height: $height;
opacity: 1;
}
}
.panel-faq { @include accordion-transition($panel-height-md); }
.panel-contact { @include accordion-transition($panel-height-lg); }
真正自动适配高度？必须配合 JS 获取 scrollHeight
如果内容高度完全不可预知（比如用户输入、异步加载），Sass 无能为力。此时需在 JS 中读取 element.scrollHeight，并写入内联样式：
const panel = document.querySelector('.accordion-panel');
panel.style.maxHeight = panel.scrollHeight + 'px';
// 收起时设为 0，展开时再重设
注意两个坑：
- 必须等内容渲染完成后再读
scrollHeight（可用requestAnimationFrame或offsetParent检查） - 过渡生效前，
max-height必须从0开始，不能是none或未设置 - 若内容字体/行高变化，需重新计算（比如切换主题后）
用 height 替代 max-height 的可行性与限制
有人尝试用 height: 0 → height: auto，同样无效；但若配合 overflow: hidden 和固定行高，可改用 line-height × line-count 算高度——这仅适用于纯文本且行数可控的场景。
更现实的选择是放弃纯 CSS 方案，在关键交互点用 JS 注入精确高度，Sass 只负责生成过渡声明和基础类名。复杂折叠面板的动画精度，终究取决于你愿意把多少逻辑交给运行时判断。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
