点击后卡片高度平滑过渡需用max-height替代height，设初始max-height:0和overflow:hidden，展开时设足够大的安全值（如500px）并配transition: max-height 0.3s ease；内容高度差异大时应JS读取scrollHeight动态设置，避免截断或拖沓。
点击后卡片高度如何平滑过渡
直接用 height: auto 配合 transition 是无效的——浏览器无法对 auto 值做插值计算，结果就是瞬间展开或根本不动。
解决方法是改用 max-height 过渡，并设一个足够大的安全上限（比如 500px），同时确保内容区默认 overflow: hidden。
-
max-height从0→500px可过渡，但需注意：这个值必须大于实际内容高度，否则会截断 - 若卡片内容高度差异大（比如有的只有 2 行，有的有 10 行），建议用 JS 动态读取
scrollHeight设置max-height，避免硬编码 - 过渡时间推荐
0.3s，过长显得迟滞，过短（0.1s）则像弹出
按钮点击如何触发展开/收起状态切换
纯 CSS 方案受限（比如依赖 :checked + 隐藏 checkbox），实际项目中几乎都用 JS 控制 class 切换。关键是状态同步和可访问性。
- 给卡片容器加一个
is-expanded类，CSS 中定义该类下的max-height和padding变化 - 按钮
aria-expanded属性必须随状态实时更新：aria-expanded="true"/"false" - 不要只靠 class 切换来判断当前状态，优先读取
element.classList.contains('is-expanded')，避免 DOM 和 JS 状态不一致
展开后内部元素动画不同步怎么办
常见现象：卡片拉伸完成，但里面的文字、图标才开始淡入或上浮——这是各元素 transition 延迟没对齐导致的视觉割裂。
立即学习“前端免费学习笔记（深入）”；
- 统一用
transition: max-height 0.3s ease, opacity 0.2s 0.1s ease, transform 0.2s 0.1s ease，让 opacity 和 transform 有0.1s延迟，等高度过渡过半再启动 - 避免对
display做过渡（它不可动画），所有隐藏逻辑走visibility: hidden+opacity: 0组合 - 如果用了
transform: translateY()做入场位移，确保初始值不是translateY(-20px)这种绝对值，而应基于父容器高度动态计算，否则在不同尺寸卡片里错位
移动端 Safari 上过渡卡顿或失效
iOS 15+ 的 Safari 对 max-height 过渡有渲染优化问题，尤其在快速连续点击时容易跳帧或直接跳变。
- 加
will-change: max-height到卡片容器，提前提示浏览器该属性将变化（但别滥用，仅限交互频繁的元素） - 避免同时过渡太多属性，比如边框颜色 + 阴影 + 高度 + 内边距——优先保
max-height和opacity，其余用transition: none或 JS 单帧修改 - 真机测试时发现卡顿，可降级为
transform: scaleY()+origin-top，虽然不是“拉伸”而是缩放，但性能更稳
最麻烦的不是写法，而是内容高度不确定时的 max-height 安全值设定——设小了截断，设大了过渡慢。真正可靠的方案还是 JS 测高 + height + overflow: hidden + transition: height，只是得手动清定时器防重复触发。
