details的open属性无法直接触发CSS过渡，需用max-height或JS获取scrollHeight实现高度动画，并注意动画结束后恢复height: auto以避免影响后续尺寸计算和打印样式。
details元素的open属性本身不触发CSS过渡
直接给 details 加 transition: all 0.3s 是无效的——open 是布尔属性，切换时不会引起可动画的 CSS 属性（比如 height、opacity）变化，浏览器不会触发重排/重绘，自然无法过渡。
用 summary + 隐藏内容容器模拟可动画区域
真正能加过渡的是内部内容（比如 <div class="details-content">），但必须解决两个关键问题：高度从 0 → 自适应、溢出隐藏控制。常见做法是：
- 把要展开的内容包进一个有明确类名的容器（如
<div class="details-content">） - 初始设
height: 0; overflow: hidden;，并确保内容内边距/外边距不影响折叠效果 - 利用
details[open] .details-content切换为height: auto;—— 但注意：height: auto不能参与过渡，得改用具体像素值或max-height - 更稳妥方案是用
max-height过渡（例如max-height: 0→max-height: 500px），前提是预估最大高度足够容纳所有内容
JavaScript辅助获取真实高度实现平滑过渡
如果内容高度不可预估（比如含响应式文本、动态插入节点），纯 CSS 的 max-height 容易出现“先弹再收”或“过渡过快/过慢”。这时需 JS 辅助：
- 监听
toggle事件（details.addEventListener('toggle', ...)） - 在
open为true时，先设height: 0、overflow: hidden，强制重排，再读取scrollHeight - 然后设
height: ${scrollHeight}px，过渡生效；动画结束后清理内联样式（恢复height: auto） - 收起时同理：先设具体高度，再设回
0，等过渡结束再移除高度样式
注意：不要在 transition 中包含 height 和 opacity 同时动画却不同步，容易视觉割裂；建议只动 height 或搭配 opacity 但设相同 duration 和 timing-function。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
兼容性与无障碍注意事项
details 在现代浏览器支持良好（Chrome 12+、Firefox 49+、Safari 6+），但 IE 完全不支持，需降级处理。更重要的是：
- 不要用
display: none控制内容显隐——会破坏屏幕阅读器对details的语义识别 - 过渡过程中避免设置
visibility: hidden，否则焦点可能丢失或朗读中断 - 若用 JS 控制高度，记得在
transitionend后恢复height: auto，否则影响后续 JS 获取尺寸或打印样式 - 移动端要注意
scrollHeight可能受缩放、字体加载延迟影响，首次计算可加setTimeout(..., 0)微任务等待渲染完成
最易被忽略的点：过渡动画的“收尾清理”——很多人设了 height 就不管了，结果后续 JS 拿到错误高度，或者打印时内容被截断。动画结束必须清内联 height，让样式回归 CSS 层控制。
