Material-UI v5 对话框退出淡入淡出动画不适用于 React Router

Posted 2023-02-21

【中文标题】Material-UI v5 对话框退出淡入淡出动画不适用于 React Router

【英文标题】：Material-UI v5 Dialog exit fade animation not working with React Router

【发布时间】：2021-10-17 04:45:32

【问题描述】：

我正在从他们的docs 编辑 React Router Modal Gallery 示例，以包含 Material-UI dialogs。问题是退出动画（淡出）没有运行，因为当您关闭模式时 URL 会发生变化，所以它就消失了。

有没有办法保留当前功能并添加令人愉快的淡出？

我需要的与this 非常相似，但是当您在该示例上刷新页面时，模态仍处于打开状态，我需要它在页面刷新时没有模态的情况下打开，就像在代码框和默认 React 中一样路由器示例。

注意：这个问题不是 Mui5 特有的，我只是碰巧在使用它。

【参考方案1】：

不确定这是否是您想要的，也不确定这是否是最好的方法。

您可以通过onExited() 方法手动操作过渡并在动画完成时做任何您想做的事情。

const Transition = React.forwardRef((props, ref) => 
  const history = useHistory();
  return (
    // use Slide to display a clearer transition,
    // can replace it with Fade
    <Slide
      ref=ref
      ...props
      // do something after animation exited
      onExited=() => 
        history.goBack();
      
    />
  );
);

function Modal(props) 
  // open state is used for transition trigger
  const [open, setOpen] = React.useState(props.open);

  const  id  = useParams();
  const image = IMAGES[parseInt(id, 10)];

  if (!image) return null;

  function handleClose() 
    // setting false to trigger exit animation
    setOpen(false);
  

  return (
    <Dialog
      open=open
      onClose=handleClose
      TransitionComponent=Transition
      scroll="body"
    >
      <Content />
    </Dialog>
  );

这里是codesandbox for demo。

【讨论】：

这正是我想要的，谢谢！对不起，如果我不清楚。这个问题的标题可能是“如何在 Material-UI v5 中正确使用 TransitionComponent”?‍♂️