CSS transition 无法直接作用于伪元素的 height 或 max-height，因伪元素不参与文档流且尺寸不可被动画引擎追踪；应将可动画属性（如 max-height、opacity）应用于真实 DOM 元素，伪元素仅作静态装饰。
transition 无法直接作用于伪元素的高度
CSS 的 transition 不支持对 ::before 或 ::after 的 height、max-height 做平滑过渡——因为伪元素本身不参与文档流，且其尺寸在大多数浏览器中无法被 CSS 动画引擎实时追踪。你看到的“高度展开”效果，几乎都不是靠直接 transition 伪元素 height 实现的。
常见错误现象：transition: height 0.3s; 写在 ::after 上完全没反应；或者用 content + visibility 模拟展开，但没有过渡感。
- 真正可行的路是：把可动画的属性（如
max-height、opacity、transform）放在真实 DOM 元素上，让伪元素作为装饰性辅助 - 如果坚持用伪元素承载内容（比如箭头、连接线），它应该只负责静态视觉，动态部分交给兄弟元素或 wrapper
- 兼容性上，
max-height过渡比height更可靠，但必须设一个“足够大但不过分夸张”的固定值（比如max-height: 200px;），否则从0→auto会失效
时间轴节点展开的推荐 DOM 结构
别把展开内容塞进 ::after，而是用一个紧邻的 <div class="timeline-node__detail"> 承载文字、列表等可变高内容。伪元素只干两件事：画竖线、打点、加小图标。
<p>使用场景：点击节点标题，下方展开说明；移动端需支持 touch；内容长度不确定。</p>
<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill11112" title="CSS工具箱(专业版)"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20e352aa140.jpg" alt="CSS工具箱(专业版)" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill11112" title="CSS工具箱(专业版)">CSS工具箱(专业版)</a>
<p>全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。</p>
</div>
<a href="/xiazai/skill11112" title="CSS工具箱(专业版)" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
<ul>
<li>
<code>timeline-node__trigger 是可点击区域（比如 <h3></h3>），绑定 JS 切换 .is-expanded
timeline-node__detail 是真实内容容器，设置 max-height 和 overflow: hidden
::before）仅用于绘制时间轴主干线和节点圆点，不参与展开逻辑timeline-node__detail 设 display: none —— 这会让 transition 失效；改用 max-height: 0 + opacity: 0 配合 transition
transition 的关键参数组合
光写 transition: max-height 0.3s ease; 不够。浏览器需要明确知道“起始态”和“结束态”的数值才能插值，而 auto 不是可动画值。
性能影响：过大的 max-height（如 1000px）会导致滚动时重排压力上升；过小（如 50px）又会截断长内容。
- 设合理上限：
max-height: 240px;（约 6 行文本 + 间距） - 同时过渡
opacity和max-height，视觉更自然：transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease; - 展开时设
max-height: 240px;+opacity: 1;；收起时设max-height: 0;+opacity: 0; - 注意：IE11 不支持
cubic-bezier()在transition中多属性分别指定缓动，需统一用ease或降级
JS 触发展开时容易漏掉的细节
很多人用 element.classList.toggle('is-expanded') 就以为完事了，但实际交互中常出现“点一下没反应”“连点两次才生效”“收起后高度残留”等问题。
原因往往不是 CSS 写错，而是 JS 没等样式计算完成就切状态。
- 不要在 class 切换后立刻读取
offsetHeight—— 此时浏览器可能还没应用新样式，得用getComputedStyle或requestAnimationFrame - 如果内容是异步加载（比如从 API 拉描述），确保 DOM 插入后再触发展开，否则
max-height过渡会按空内容高度计算 - 移动端需监听
click和touchstart并preventDefault()防止双击缩放或延迟 - 键盘可访问性：为
timeline-node__trigger加tabindex="0"，监听Enter和Space键触发展开
