React 中手风琴组件开启时有平滑过渡，但关闭时动画立即消失，根本原因是 DOM 元素被条件渲染（{isOpen && ...）直接卸载，导致 maxHeight 过渡中断。需改用 CSS 动画保留元素并控制可见性，而非依赖条件渲染移除节点。
css 过渡动画在手风琴组件关闭时失效的解决方案：react 中手风琴组件开启时有平滑过渡，但关闭时动画立即消失，根本原因是 dom 元素被条件渲染（{isopen &&
...）直接卸载，导致 maxheight 过渡中断。需改用 css 动画保留元素并控制可见性，而非依赖条件渲染移除节点。
要实现真正双向可过渡的手风琴组件（开/关均有流畅动画），关键在于：避免在关闭过程中卸载 DOM 节点，而是始终保留在 DOM 中，并通过 max-height + overflow: hidden 配合 CSS transition 控制展开与收起的视觉效果。
✅ 正确实现思路
- 始终渲染 ，不再使用 {isOpen && ...} 条件渲染；
- 通过 max-height 的动态值（如 0px ↔ 实际高度）驱动过渡；
- 添加 overflow: hidden 防止内容溢出；
- 使用 transition: max-height 350ms ease-in-out（推荐仅过渡 max-height，避免 all 引发意外重绘）；
- 在关闭完成后再逻辑上“隐藏”内容（例如添加 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="/xiazai/skill11112" title="CSS工具箱(专业版)"><img src="https://img.php.cn/upload/skill/001/246/273/6adaf20e352aa140.jpg" alt="CSS工具箱(专业版)" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill11112" title="CSS工具箱(专业版)">CSS工具箱(专业版)</a> <p>全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。</p> </div> <a href="/xiazai/skill11112" title="CSS工具箱(专业版)" 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 生命周期——让元素常驻、仅控制其尺寸与可见性。掌握这一原则，不仅适用于手风琴，也广泛适用于折叠面板、下拉菜单、模态框等需要退出动画的交互组件。
