反模式 · 动效 · 中
动画直接改宽高
动画改宽高指直接过渡布局属性，每帧强制重排，在真实设备上必然掉帧。
症状
transition 或 keyframes 里出现了 width、height、top、left、margin、padding。
为什么会这样
height:auto 到一个固定值是写手风琴最直觉的方式，模型也首先想到它。在 DOM 小、机器快的环境里演示完全没问题。
规则
只动 transform 与 opacity。绝不过渡布局属性。
- 把 width/height 过渡换成 scaleX/scaleY 或基于 transform 的展开。
- 进场离场用 opacity 配 transform；避开 margin 与 padding 动画。
- 确实必须改尺寸时，先量一次，再动一个固定的 transform。
动画直接改宽高是什么？
width、height、top、left 都是布局属性：改变它们会让浏览器每帧重算布局。在一台中端手机上那就是肉眼可见的卡顿。transform、opacity 以及（谨慎使用）clip-path 是合成属性——浏览器不必重排就能移动它们。动这些；如果确实必须改变布局，就动 transform，让布局瞬间切换。
修复 Prompt
贴在你现有 Prompt 之后，把这类毛病从结果里剥掉。