details标签无法直接用transition实现动画，需用max-height与opacity组合模拟淡入效果；关键在于details[open]时设max-height为具体值（非none）并配合overflow:hidden。
details标签本身不支持CSS transition动画
直接给 <details></details> 元素加 transition: opacity 0.3s 是无效的，因为它的 open 属性切换是布尔值变更，不触发 CSS 可动画属性（如 opacity）的过渡。浏览器不会自动在 open 和 closed 状态间插值透明度。
用 summary + 隐藏内容区 + max-height 过渡模拟淡入
主流做法是把 <details></details> 当作语义容器，手动控制内部内容区域的显隐和动画。关键点在于：不依赖 display 切换（它不可动画），而用 max-height + opacity 组合实现“由浅入深”的视觉效果。
- 给
<details></details>设置overflow: hidden - 内部内容（比如
<div class="details-content">）初始 <code>max-height: 0、opacity: 0、overflow: hidden - 当
<details open></details>时，用属性选择器匹配：details[open] .details-content→ 设为max-height: 300px（需预估最大高度）、opacity: 1 -
transition写在.details-content上，同时过渡两个属性：transition: max-height 0.3s ease-out, opacity 0.3s ease-out
示例片段：
<details>
<summary>点击展开</summary>
<div class="details-content">这里是渐变出现的内容</div>
</details>
<p><style>
.details-content {
opacity: 0;
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
}
details[open] .details-content {
opacity: 1;
max-height: 300px; /<em> 必须设具体值，不能用 'none' </em>/
}
</style>为什么 max-height 要写具体数值而不是 none
max-height: none 无法参与 CSS transition，浏览器不支持从 0 到 none 的插值计算，会导致动画直接跳变。必须用一个足够大的固定值（如 300px 或 500px）代替，确保内容能完全显示。若内容高度差异大，可按场景分组设不同 max-height，或用 JS 动态写内联样式——但那就脱离纯 CSS 方案了。
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
立即学习“前端免费学习笔记（深入）”；
真正“由浅入深”的透明度需要额外处理 summary
上面方案只动了内容区，<summary></summary> 默认始终可见。如果想让整个 <details></details>（含 summary）都参与淡入，得把它也纳入动画流：把 <summary></summary> 包进一个 wrapper，并和内容区一起控制 opacity。但要注意，这会破坏 <summary></summary> 的原生点击行为，需用 JS 手动绑定 toggle 逻辑，语义性和可访问性会下降。多数场景下，只对内容区做渐变更稳妥。
细节上最易被忽略的是 max-height 的取值和 overflow: hidden 的配合——少一个，动画就断掉。
