直接修改 transition-duration（如 max-height 0.3s ease-out）是最有效控制折叠展开速度的方式；时长推荐：0.2s（轻量提示）、0.3s（通用）、0.4–0.5s（重内容）；需配合合理 max-height 值、opacity 组合及 overflow: hidden 确保动效自然稳定。
transition-duration 直接改动画时长
折叠展开的“速度”本质是 CSS transition 的持续时间，不是 JS 控制帧率。改 max-height 0.3s ease-out 中的 0.3s 就是最直接、最有效的方式。
常见误区是以为调 JS 定时器或 requestAnimationFrame 能控制节奏——其实只要用的是 max-height + transition 方案，浏览器就只认这个 CSS 值。
-
0.2s：适合工具类小面板（如搜索框、通知提示），响应快但略显急促 -
0.3s：通用推荐值，人眼可感知过渡、又不拖沓 -
0.4s及以上：适合内容较重的区域（如带图片的详情面板），但超过0.5s会明显感觉延迟，用户可能误判为卡顿
ease-out / ease-in-out 影响动效“呼吸感”
光调时长不够，缓动函数（timing function）决定动画是否自然。默认 ease 在中段加速过快，收起时容易显得“啪”一下弹回去。
实际项目中建议按场景选：
立即学习“前端免费学习笔记（深入）”；
- 收起动作优先用
ease-out：开头快、结尾慢，模拟惯性停止，视觉更可控 - 展开动作可用
ease-in-out：开头柔和启动，中间加速，结尾缓冲，适合内容较多的区域 - 避免用
linear：匀速运动在 UI 中缺乏表现力，尤其在高度变化大时显得机械
示例：transition: max-height 0.35s ease-out, opacity 0.25s ease-out; —— 两个属性用不同缓动，是为了让高度收尾和透明度收尾同步自然。
从零开始创建惊艳、动画丰富且自包含的 HTML 演示文稿，或通过转换 PowerPoint 文件生成。当用户希望制作幻灯片、构建演示文稿、打造路演资料（pitch deck）、将 PPT/PPTX 转换为网页格式，或增强现有 HTML 演示文稿时，应使用此能力。该能力帮助用户通过视觉预览而非抽象选项来发掘自身审美偏好。
max-height 值大小会悄悄拖慢 perceived speed
动画“看起来快不快”，不仅取决于 duration，还受 max-height 目标值影响。比如设 max-height: 1000px，哪怕内容只有 80px 高，浏览器仍要从 0 过渡到 1000，时间被拉长、末段“空跑”明显。
解决方法不是硬编码一个超大值，而是：
- 预估内容最大高度（如最多 6 行文字 × 行高 ≈
120px），加点余量设成160px - 动态读取
element.scrollHeight后再赋值，但要注意：必须先强制重排（如读offsetHeight），否则 scrollHeight 可能拿不到渲染后的真实值 - 收起完成后，可把
max-height清回none，避免后续 JS 计算布局时被这个固定值干扰
opacity + max-height 组合比单用 height 更稳，但得配对调
只靠 max-height 动画，小高度内容（比如一行文字）可能看不出过渡；只靠 opacity 又会留下占位空白。两者组合是行业通用解法，但节奏必须一致。
关键细节：
- 两个属性的
duration最好相同，或opacity略短（如0.25svs0.3s），避免内容已展开但还半透明 -
overflow: hidden必须始终存在，否则max-height过渡时内容会撑破容器、溢出可见 - 别用
visibility替代opacity：它不可动画，会破坏连贯性，导致“闪一下”
真正难调的不是参数本身，而是当内容含图片、字体加载未完成、或 flex/grid 布局嵌套时，scrollHeight 拿不准、重排时机不对——这些地方一错，动效就断在中间。
