MUI Collapse组件仅关闭时动画，展开无过渡问题求助

我之前碰到过完全一样的问题，大概率是以下几个原因导致的，你可以逐一排查：

• 子元素高度计算异常：MUI Collapse是基于高度过渡实现动画的，如果子元素设置了固定高度、或者没有正确处理overflow，会导致展开时动画失效。可以尝试给子元素添加min-height: 0，或者移除硬写的高度值，让元素高度由内容自然撑开。
• 动画配置被篡改：如果自定义了timeout属性（比如误将展开的timeout设为0），或者用自定义CSS覆盖了MUI默认的transition样式，会出现等待时长后直接渲染的情况。先还原为默认的timeout="auto"试试。
• 状态更新时机问题：如果控制in状态的变量是异步更新的（比如在useEffect的异步操作里修改状态），Collapse可能无法正确捕获状态变化的时机，导致动画异常。确保状态更新是同步触发的。
• React Strict Mode干扰：Strict Mode会触发两次组件渲染，可能打乱Collapse的初始动画状态。可以临时关闭Strict Mode，看看问题是否消失，再调整组件初始化逻辑。

以下是一个能正常触发展开/关闭动画的基础示例：

import Collapse from '@mui/material/Collapse';
import { useState } from 'react';

function CollapseDemo() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div>
      <button onClick={() => setIsOpen(prev => !prev)}>切换折叠状态</button>
      <Collapse in={isOpen}>
        <div style={{ padding: '1rem', background: '#f5f5f5', marginTop: '0.5rem' }}>
          这是折叠面板的内容，展开和关闭都应该有平滑的过渡动画
        </div>
      </Collapse>
    </div>
  );
}

export default CollapseDemo;

如果排查后还是没解决，可以把你的代码片段（尤其是Collapse的使用方式和子元素样式）贴出来，方便进一步定位问题。

内容的提问来源于stack exchange，提问作者Burgos