display:none无法动画因其无中间状态，需用max-height+overflow:hidden+transition实现滑动；max-height须设固定值（非auto），JS控制时要避免渲染竞态并确保收起也走CSS过渡。

直接用

+

无法实现平滑动画，它只有显隐切换；要滑动效果，必须绕过 display，用 max-height + overflow: hidden 配合 transition。

为什么 display: none 不能加动画

CSS 的 transition 不支持 display 属性——它是个离散开关，没有中间状态。哪怕你写了 transition: display 0.3s，浏览器也完全忽略。所有“切 display 就想有动画”的写法，实际都是瞬时切换，只是人眼没看清。

常见错误现象包括：

• 点击后内容“啪”一下弹出来，没滑动过程
• 收起时高度塌陷过快，文字被截断或抖动
• 用 height: auto 做过渡，结果动画卡死或直接跳变

max-height 动画怎么写才不翻车

核心是：用一个足够大的固定值代替 auto，并确保初始和展开态都设了 overflow: hidden。

实操建议：

Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转

实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。

下载

• 初始状态：max-height: 0; overflow: hidden;
• 展开状态：max-height: 500px;（不是 auto，也不是 100%）
• 必须加 transition: max-height 0.3s ease-in-out;，且只过渡 max-height，别混 opacity 或 height
• 如果内容高度可能超 500px，就改用 800px 或更保守的值；宁可略长一点，也不能低估
• 避免在父容器上同时设 flex + max-height，容易触发高度计算冲突，优先用 block 布局

JavaScript 控制折叠状态时的关键点

光写 CSS 不够，JS 要负责精准切换类、避免样式竞争。

常见陷阱：

• 直接 el.classList.toggle('open') 后立刻读取 offsetHeight，可能拿不到新高度（渲染未完成）→ 应用 getComputedStyle(el).maxHeight 或用 requestAnimationFrame 延迟读取
• 多个折叠项共用同一套 JS 逻辑，但没隔离状态 → 每个
  或容器必须有独立的控制变量或 data 属性
• 用 click 事件绑定在
  上，却忘了阻止默认行为（尤其当它嵌套链接时）→ 加 event.preventDefault()
• 移动端点击区域太小，没加 touch-action: manipulation，导致响应延迟

最易被忽略的是：动画是否真正“双向”生效。很多人只写了展开的 max-height 过渡，收起时却靠 JS 强制设回 0 —— 这会跳过 CSS 过渡，导致收起无动画。必须让收起也走同一个 CSS 类切换路径，且初始和终态都受 transition 管控。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！