状态之间的转换 · A 变成 B
手风琴折叠Accordion
- 紧凑
- 有条理
- 可预期
一块内容展开或收起时，它的高度平滑变化，下面的内容被顺势推开或收回。
什么时候用它
折叠面板、常见问答、多级菜单用它；内容本身很长的用“揭示”，避免整块高度抖得厉害。
参数
280ms · ease-in-out · grid-template-rows: 0fr→1fr
配方
手风琴折叠 → grid-template-rows 0fr → 1fr @ 280ms ease-in-out
给 AI 的一句话
把这个折叠面板做成手风琴动画：grid-template-rows 从 0fr 过渡到 1fr，280ms，ease-in-out，收起时反向。