如何监听MUI Modal组件的打开/关闭状态及关闭动画完成事件？

MUI的Modal组件自带的onClose确实是在关闭动画启动时就触发了，要等动画完全结束再执行逻辑，其实可以利用过渡组件的onExited事件来实现，下面给两种常用方案：

• 自定义过渡组件监听结束事件
  如果你直接用Modal组件，可以通过TransitionComponent传入带onExited回调的过渡组件（比如Fade），这个回调会在动画彻底结束后触发。示例代码：

  import Modal from '@mui/material/Modal';
  import Fade from '@mui/material/Fade';
  
  function MyModal({ open, onClose, afterClose }) {
    const handleAnimationEnd = () => {
      // 这里写动画结束后要执行的逻辑
      afterClose();
    };
  
    return (
      <Modal
        open={open}
        onClose={onClose}
        // 自定义过渡组件，绑定onExited事件
        TransitionComponent={(props) => (
          <Fade {...props} onExited={handleAnimationEnd} />
        )}
      >
        <div style={{ padding: 20, background: '#fff', margin: 'auto' }}>
          这是Modal内容
        </div>
      </Modal>
    );
  }
  

• 用Dialog组件简化操作（如果适用）
  如果你用的是基于Modal封装的Dialog组件，更简单，直接通过TransitionProps传递onExited即可：

  import Dialog from '@mui/material/Dialog';
  import DialogContent from '@mui/material/DialogContent';
  
  function MyDialog({ open, onClose, afterClose }) {
    return (
      <Dialog
        open={open}
        onClose={onClose}
        TransitionProps={{
          onExited: afterClose // 直接把结束逻辑传进去
        }}
      >
        <DialogContent>
          这是Dialog内容
        </DialogContent>
      </Dialog>
    );
  }
  

原理很简单：MUI的Modal过渡动画是靠Fade、Slide这类过渡组件实现的，这些组件都提供了onExited钩子，专门监听过渡动画完全结束的时刻，刚好能满足你的需求。

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