height过渡需固定值，auto不可用；max-height是伪动态方案；transform scaley性能好但占布局空间；js计算scrollheight才是真动态解法。
height 直接过渡只适用于已知固定值
直接用 transition: height 0.3s 能生效，但前提是起始和结束高度都必须是明确的像素值（如 height: 0px → height: 240px）。height: auto 不能参与过渡，浏览器无法插值计算中间状态。
常见错误现象：height: 0 → height: auto 动画直接跳变，或完全无动画。
- 适用场景：折叠面板内容高度固定、弹出框预设尺寸、服务端渲染后高度可预测
- 必须配合
overflow: hidden，否则内容会溢出并破坏视觉效果 - 不要写
height: 0而不设单位，height: 0等价于height: 0px，但height: 0%行为不同，慎用
max-height 过渡是“伪动态”方案
用 max-height 替代 height 是常见取巧方式，原理是让浏览器在 0 → 某个足够大的值（如 max-height: 500px）之间做线性插值。但它不是真动态，只是靠“预留空间”骗过 transition。
容易踩的坑：max-height: 1000px 对一个实际只有 60px 高的内容来说，动画后半段明显拖慢——因为浏览器仍在按 1000px 的跨度匀速过渡。
- 建议设为略大于预期最大高度的值，例如通过 JS 一次性测算容器
scrollHeight后赋值 - 避免用
max-height: 9999px这类魔数，会导致长列表展开缓慢、移动端卡顿 - 不能替代真实高度控制，比如需要精确 bottom 对齐或与其他元素联动时会出错
transform: scaleY(0) 不改变文档流但有视觉局限
transform: scaleY(0) + transform-origin: top 可实现垂直压缩/展开，优势是不触发重排（layout）、性能好，且天然支持 auto 内容。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
但它是纯视觉缩放：元素仍占原始高度空间，可能遮挡下方内容或影响点击区域；若父容器有 overflow: hidden，缩放后内容会被裁切。
- 适合悬浮提示、模态层内部子区域等“不参与布局流”的场景
- 务必配
transform-origin: top，否则默认从中心缩放，顶部内容会位移 - 不能和
height或margin过渡混用，否则行为不可控
JavaScript + height 计算才是真动态解法
当内容由用户输入、AJAX 加载或频繁增删（如 todo 列表）导致高度不可预知时，唯一可靠方式是 JS 主动读取 scrollHeight，再设置 style.height 触发 transition。
关键点不在“怎么算”，而在“什么时候设”：必须等元素已插入 DOM 且样式生效后读取，否则 scrollHeight 返回 0。
- 典型流程：先设
height: 0→ 强制重排（如读offsetHeight）→ 再设height: el.scrollHeight + 'px' - 收起时别直接设
height: 0，应在transitionend后再设display: none或清空height - 注意：CSS 中需保留
transition: height 0.3s ease-in-out，且不能写成transition: all，否则可能意外过渡其他属性
最易被忽略的是过渡结束后对 DOM 状态的清理——比如忘记在收起动画完成后再设 display: none，会导致看不见的元素仍占据 tab 键焦点或影响无障碍阅读。这类细节不报错，但上线后才暴露。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
