折叠动画要有收起态过渡

更新于 2026-06-09

**`isOpen && <内容>` 的条件渲染只有「进入动画」——展开时能靠 `animate-in` 播一次，收起时元素直接从 DOM 卸载，没有可过渡的中间态，所以看起来「无动画」。要做双向折叠动画，必须让内容保持挂载，改用高度过渡。**

现象与根因

  • 症状：基础信息折叠后收起时无动画；自定义模块完全无动画（连展开也没有）。
  • 根因：这些区块用的是 isOpen && <内容>。展开 = 元素插入 + 进入动画；收起 = 元素移除，没有"从 1 到 0"的过程可播。
  • 自定义模块更彻底：它连展开动画都没有，等于整块没有折叠过渡。

做法

和其它 section 对齐，改成保持挂载 + 网格行高过渡：

grid-rows-[1fr]  →  grid-rows-[0fr]   +  opacity 过渡

这样收起时内容仍在 DOM 里，只是被行高与透明度渐变掉，进出都有动画。改完要补对应单测（basics-editor.test.tsx、custom-section-editor.test.tsx）并跑 tsc --noEmit。

判据

问一句就够了：「这个动画是在元素被插入/移除时播的，还是在一个持续存在的元素上过渡的？」 前者只能单向。

相关