CSS 过渡动画在手风琴组件关闭时失效的解决方案

要实现真正双向可过渡的手风琴组件（开/关均有流畅动画），关键在于：避免在关闭过程中卸载 DOM 节点，而是始终保留在 DOM 中，并通过 max-height + overflow: hidden 配合 CSS transition 控制展开与收起的视觉效果。

✅ 正确实现思路

1. 始终渲染
   ，不再使用 {isOpen && ...} 条件渲染；
2. 通过 max-height 的动态值（如 0px ↔ 实际高度）驱动过渡；
3. 添加 overflow: hidden 防止内容溢出；
4. 使用 transition: max-height 350ms ease-in-out（推荐仅过渡 max-height，避免 all 引发意外重绘）；
5. 在关闭完成后再逻辑上“隐藏”内容（例如添加 opacity: 0 或 visibility: hidden），但不移除 DOM。

✅ 修正后的 React 组件代码（关键改动）

export const Accordion = ({ bodyText, headerText }) => {
  const accordionRef = useRef(null);
  const [isOpen, setIsOpen] = useState(false);
  const [height, setHeight] = useState("0px");

  useEffect(() => {
    if (isOpen && accordionRef.current) {
      // 展开时：设为真实滚动高度
      setHeight(`${accordionRef.current.scrollHeight}px`);
    } else {
      // 关闭时：先设为 0，触发过渡
      setHeight("0px");
    }
  }, [isOpen]);

  return (
    <div className={cx(styles.accordion, { [styles["accordion--active"]]: isOpen })}>
      <div className={styles.item}>
        <div className={styles.header} onClick={() => setIsOpen((prev) => !prev)}>
          <div>{headerText}</div>
          <div>{isOpen ? "−" : "+"}</div>
        </div>
        {/* ✅ 始终渲染 body，通过 style 控制 maxHeight */}
        <div
          className={styles.body}
          ref={accordionRef}
          style={{ maxHeight: height }}
        >
          <p>{bodyText}</p><div class="aritcle_card flexRow">
                                                        <div class="artcardd flexRow">
                                                                <a class="aritcle_card_img" href="/ai/1751" title="Descript"><img
                                                                                src="https://img.php.cn/upload/ai_manual/000/969/633/68b6d01b6eea6312.png" alt="Descript"  onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
                                                                <div class="aritcle_card_info flexColumn">
                                                                        <a href="/ai/1751" title="Descript">Descript</a>
                                                                        <p>一个多功能的音频和视频编辑引擎</p>
                                                                </div>
                                                                <a href="/ai/1751" title="Descript" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
                                                        </div>
                                                </div>
        </div>
      </div>
    </div>
  );
};

✅ 推荐 CSS 样式（精简 & 可靠）

.accordion {
  width: 100%;
  border: 2px solid #afafaf;
  margin-bottom: 1rem;

  &--active {
    border-color: $black;
    box-shadow: 0 0.25rem 0.5rem #515151;
  }

  .item {
    .body {
      overflow: hidden;
      max-height: 0; /* 初始收起 */
      transition: max-height 350ms ease-in-out, opacity 150ms ease; /* 可选：配合 opacity 提升感知流畅度 */
      background-color: $white;
      padding: 0 1rem;
      box-sizing: border-box;

      p {
        margin: 0 0 1rem 0;
      }
    }

    /* 可选增强：关闭末期淡出，提升体验 */
    &.is-closing .body {
      opacity: 0;
    }

    .header {
      display: flex;
      justify-content: space-between;
      background-color: $white;
      font-size: 2.5rem;
      padding: 1rem;
      cursor: pointer;
    }
  }
}

⚠️ 注意事项与最佳实践

• 不要使用 display: none 或条件渲染移除元素：这会强制中断所有 CSS 过渡；
• 慎用 transition: all：可能触发布局抖动或无意义属性过渡（如 border-color），建议明确指定 max-height；
• max-height 的局限性：若内容高度差异极大（如从 0px → 1000px），过渡可能显得“加速感过强”。此时可考虑：
  • 使用 height: auto + useLayoutEffect + getBoundingClientRect() 动态计算；
  • 或引入 react-transition-group 等动画库处理进入/退出生命周期；
• 无障碍支持：添加 aria-expanded 和 aria-hidden 属性，确保屏幕阅读器正确识别状态；
• 性能提示：max-height 过渡是 GPU 友好的（不触发重排），优于 height: auto 或 transform: scaleY()（后者需注意子元素 transform-origin）。

✅ 总结

手风琴关闭动画失效的本质，是 React 的条件渲染机制与 CSS 过渡生命周期的冲突。解决之道不是“修复过渡”，而是重构 DOM 生命周期——让元素常驻、仅控制其尺寸与可见性。掌握这一原则，不仅适用于手风琴，也广泛适用于折叠面板、下拉菜单、模态框等需要退出动画的交互组件。