height: auto 无法触发 transition 动画，因 auto 非数值不可插值；可用 max-height 替代，但需设初始为 0 且 overflow: hidden，并避免过大固定值；动态场景须用 JS 读取 scrollHeight 后设置 height 并控制过渡。
为什么 height: auto + transition 不生效
直接写 height: auto 并配 transition: height 0.3s，浏览器根本不会动——auto 不是数值，无法插值计算。你看到的要么是瞬间展开，要么压根没动画。这不是 bug，是 CSS 规范决定的：transition 只对「可计算、可插值」的值有效。
max-height 是最简方案，但得避开两个坑
用 max-height 替代 height 是主流做法，但它不是设个 max-height: 500px 就万事大吉：
- 初始状态必须是
max-height: 0+overflow: hidden，否则内容会溢出或过渡不触发 - 目标值不能随便写个“够大”的数，比如
max-height: 1000px。如果实际内容只高 60px，浏览器仍要花满 0.3s 从 0 过渡到 1000，后半段就是“悬停等待”，体验拖沓 - 不同卡片内容行数差异大时（2 行 vs 12 行），硬编码上限必然顾此失彼
动态读取 scrollHeight 才算真正自适应
当内容高度不可预知，又要求精准过渡时，JS 是绕不开的。核心逻辑是：展开前先测真实高度，再设为 height 并触发动画；收起时再平滑归零。
关键步骤：
Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转
下载
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
- 初始状态用
height: 0+overflow: hidden，别碰display - 点击展开时，先强制获取
element.scrollHeight（它包含 padding，不含 border/margin） - 用
element.style.height = element.scrollHeight + 'px'设置目标高度 - 动画结束后（监听
transitionend），清除内联height，回归height: auto（仅用于后续 JS 重读，不影响动画） - 收起时，先设回
height: element.scrollHeight + 'px'，再设height: 0—— 否则从auto到0依然无效
transition 写在哪？哪些属性能动
transition 必须写在默认样式里，不能只放在 :hover 或 class 切换后的规则中，否则只有展开有动画、收起直接跳变。
推荐组合（兼顾效果与性能）：
-
transition: height 0.3s ease-in-out—— 直接控制高度，语义清晰 - 避免
transition: all 0.3s，它可能意外过渡border-color或box-shadow，造成干扰 - 别对
display、visibility、font-size写 transition，它们不支持插值，写了也白写 - 若容器内有图片或字体加载延迟，scrollHeight 可能读小，需在
img.onload或fontface.load后重新测量
真正难的不是写几行 CSS，而是判断何时该用静态 max-height、何时必须上 JS 动态读高——内容是否固定、是否允许轻微截断、是否接受“假高度”带来的延迟感，这些权衡点比代码本身更影响最终体验。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
