如何解决MUI Menu组件无法应用Collapse过渡动画的问题？

你当前的写法错误在于把Collapse放在Menu的子元素中，而Menu的过渡动画需要通过TransitionComponent属性指定，就像你之前实现CustomFade的方式一样。以下是正确的实现步骤：

1. 创建自定义Collapse过渡组件 #

和CustomFade一样，需要用forwardRef将ref传递给内部的Collapse组件，因为Menu需要控制过渡组件的实例：

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

const CustomCollapse = forwardRef((props, ref) => {
  // 默认是垂直方向折叠，可按需设置direction="horizontal"实现横向折叠
  return <Collapse {...props} ref={ref} />;
});

export default CustomCollapse;

2. 在Menu组件中配置过渡 #

将TransitionComponent设置为自定义的CustomCollapse，同时调整Menu的paper样式，确保Collapse的高度变化能正常生效（关键是设置overflow: hidden）：

import CustomCollapse from './CustomCollapse'; // 导入自定义组件

// ...其他逻辑代码

<Menu
  anchorEl={anchorElNav}
  anchorOrigin={{
    vertical: 'bottom',
    horizontal: 'left',
  }}
  transformOrigin={{
    vertical: 'top',
    horizontal: 'left',
  }}
  open={Boolean(anchorElNav)}
  onClose={handleCloseNavMenu}
  // 移除transitionDuration={0}，否则会直接禁用过渡动画
  sx={{ display: { xs: 'block' } }}
  TransitionComponent={CustomCollapse} // 指定过渡组件
  slotProps={{
    paper: {
      sx: {
        backgroundColor: '#123456',
        padding: '0px',
        margin: '0px',
        overflow: 'hidden', // 关键：确保内容不会溢出，Collapse才能正常触发高度变化动画
        minWidth: 'auto', // 可选：根据需求调整容器宽度
      },
    },
  }}
>
  {/* 直接放置MenuItem，过渡动画会作用于整个paper容器 */}
  <MenuItem 
    key={'sdfad'} 
    sx={{ minHeight: 0, padding: 0, margin: 0 }} 
    onClick={handleCloseNavMenu}
  >
    <div style={{ display: 'flex', flexDirection: 'column', padding: 0, margin: 0 }}>
      {pages.map((page) => (
        <Typography 
          key={page} 
          variant='navbar' 
          component='a' 
          href='#' 
          sx={{ 
            padding: '8px 16px', // 给文本添加内边距提升交互体验
            textDecoration: 'none', 
            cursor: location.pathname === '/' ? 'default' : 'pointer', 
            color: location.pathname === '/' ? 'rgba(0,0,0,0.5)' : 'inherit' 
          }}
        >
          <span>Quinteto&nbsp;&nbsp;</span>
        </Typography>
      ))}
    </div>
  </MenuItem>
</Menu>

关键注意点 #

• 不要将Collapse作为Menu的子元素：Menu的过渡动画是作用于整个弹出的paper容器的，必须通过TransitionComponent指定过渡组件，Menu会自动将open状态传递给过渡组件的in属性。
• 必须使用forwardRef：Menu需要获取过渡组件的DOM ref来控制动画的触发和结束，因此自定义过渡组件必须包裹在forwardRef中。
• 配置paper的overflow: hidden：Collapse通过修改元素高度实现动画，如果paper的overflow属性不是hidden，内容会直接溢出，无法呈现折叠效果。
• 移除transitionDuration={0}：该属性会强制禁用Menu的过渡动画，导致Collapse无法生效。

内容的提问来源于stack exchange，提问作者Igor Galvao Bezerra