不必改 height；应使用 max-height + overflow: hidden 实现平滑过渡，初始设 max-height: 0，展开时设足够大的值（如 500px），配合 transition: max-height 和 aria-expanded 等可访问性支持。
用 button 控制 p 的显示/隐藏，必须改 height 吗？
不用。直接操作 display 或 visibility 无法触发 CSS 过渡（transition），因为它们不是「可过渡的属性」。真正能做平滑高度过渡的，只有 height、max-height 或 opacity 配合布局控制。但 height: 0 要求元素有明确的「目标高度」，而段落文字高度是动态的——所以硬设 height: 0 → height: 100px 不通用。
max-height 是最实用的过渡方案
它绕开了精确高度测量问题：只要把 max-height 设为一个远大于段落实际高度的值（比如 max-height: 100vh 或 max-height: 500px），再配合 overflow: hidden，就能让展开/收起产生视觉上的高度过渡效果。
实操要点：
- 初始状态设
max-height: 0+overflow: hidden+opacity: 0（可选，增强感知） - 展开时设
max-height: 500px（足够覆盖多数段落，但别用none或fit-content，它们不能过渡） - 过渡写在
max-height上：transition: max-height 0.3s ease, opacity 0.2s ease - JavaScript 只需切换一个 class，不要手动读取
scrollHeight—— 大多数场景没必要，且易出错
示例结构：
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
<button onclick="toggleText()">切换</button>
<p id="myPara" class="text-collapsible">这是一段会动的文本……</p>
<style>
.text-collapsible {
max-height: 0;
overflow: hidden;
opacity: 0;
transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
}
.text-collapsible.show {
max-height: 500px;
opacity: 1;
}
</style>
<script>
function toggleText() {
const p = document.getElementById('myPara');
p.classList.toggle('show');
}
</script>
为什么不用 height: auto 过渡？
height: auto 无法参与 CSS transition，浏览器不支持从 0 到 auto 的插值计算。你可能会看到「瞬间弹出」或完全无动画。有人试过用 JS 先强制获取 scrollHeight 再设死 height，但这引入了重排（reflow）、响应式失效、字体加载延迟导致高度误判等问题。除非段落内容和样式完全静态且已知，否则不推荐。
常见错误现象：
- 加了
transition: height 0.3s但没效果 → 实际走的是display: none切换 - 用了
height: auto→ 动画被忽略，退化为立即显示 -
max-height设太小（如100px）→ 段落被截断，末尾文字消失 - 忘了加
overflow: hidden→ 高度过渡时内容溢出，布局错乱
移动端和可访问性要注意什么？
动画本身没问题，但两个细节容易被忽略：
- 用户若开启了「减少动画」偏好（
prefers-reduced-motion），应禁用过渡：@media (prefers-reduced-motion: reduce) { .text-collapsible { transition: none; } } - 按钮要带
aria-expanded属性，并随状态更新：button.setAttribute('aria-expanded', p.classList.contains('show'))，否则屏幕阅读器无法感知状态变化 -
max-height值如果设得过大（如1000px），在低端 Android 上可能引发轻微卡顿，500px 是较稳妥的平衡点
高度过渡看起来简单，真正稳定可用的解法其实就那一种：max-height + 固定上限 + overflow: hidden。其他路子要么不兼容，要么埋坑太深。
