css中max-height: 0与max-height: auto无法过渡，因auto不可计算；应改用足够大的固定值（如500px）并配合overflow: hidden实现动画，避免height、display: none及transition: all。
点击按钮后盒子不展开，max-height设成0却没动画
根本原因是max-height: 0和max-height: auto无法过渡——CSS不支持auto参与transition。浏览器不知道“auto”具体是多少像素，直接跳变。
实操建议：
- 用一个足够大的固定值替代
auto，比如max-height: 500px（确保内容撑不满） - 初始状态设为
max-height: 0，同时加overflow: hidden隐藏溢出 - 展开时设为
max-height: 500px，动画就自然有了 - 如果内容高度差异大，可先用
getBoundingClientRect().height动态读取真实高度再赋值
transition写了但动画卡顿或闪一下才动
常见于直接对height做过渡，或者没关掉默认的margin/padding影响。浏览器渲染height要重排，比max-height更重。
实操建议：
- 只对
max-height和opacity做transition，避免height、margin、padding - 加
will-change: max-height提前提示浏览器优化（仅在需要时） - 确保展开/收起时
overflow: hidden始终存在，否则内容可能撑开容器导致跳动 - 别用
display: none切状态——它会中断过渡，要用visibility: hidden配合opacity
移动端点击无响应，或点一次触发两次
本质是移动端的click事件有约300ms延迟，且某些场景下touchstart和click同时触发，造成重复执行。
实操建议：
- 给按钮加
cursor: pointer并确保有user-select: none，提升触摸响应识别率 - 用
touchend代替click监听（注意防误触，可加preventDefault()） - 加节流：用
setTimeout锁住按钮状态，比如设置disabled或标记isAnimating - 避免在
:active里改max-height——伪类不触发JS，纯CSS方案这里无效
内容高度变化后动画错位或收不回去
典型发生在内容动态加载（如AJAX填入）、字体加载完成、图片加载后重排等场景。max-height还是旧值，新高度已变，导致收起时留白或裁切。
实操建议：
- 内容更新后，手动重置状态：
element.style.maxHeight = '0'→offsetHeight强制重排 → 再设目标值 - 监听
load事件（图片）或fontload（Web Font），再触发重算 - 用
ResizeObserver监控容器高度变化，自动同步max-height目标值 - 慎用
transition: all——它会让所有属性一起动，包括你没想动的color或border
最麻烦的其实是内容高度不确定又得平滑过渡，这时候max-height只是妥协方案；真要精确控制，得靠getComputedStyle + requestAnimationFrame手动驱动，但多数场景500px兜底已经够用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
