更改material-ui对话框显示的动画

Posted 2023-02-22

【中文标题】更改material-ui对话框显示的动画

【英文标题】：Change animation of material-ui dialog show

【发布时间】：2017-03-27 03:55:27

【问题描述】：

是否可以更改 material-ui 中对话框的显示动画以使用 css 做出反应？我在 css 方面并不先进，但我知道存在诸如转换和转换之类的东西。

【问题讨论】：

有可能，只需停用默认动画并添加您的自定义。可以通过 jQuery/javascript 或者 CSS transform 和 transition 添加基础动画，没错。

【参考方案1】：

2021 年 12 月更新：

下面的答案是为material-ui v1的早期版本编写的，并且是古老的历史。使用 material-ui 版本 5，概念基本相同，当前的 Dialog Demo 显示了如何实现这一点。

导入您想要的转换，但您需要使用React.forwardRef，因为转换预计会收到ref（更多信息请参见React Docs）：

import Slide from '@mui/material/Slide';

const Transition = React.forwardRef(function Transition(props, ref) 
  return <Slide direction="up" ref=ref ...props />;
);

然后：

 <Dialog
   open=open
   TransitionComponent=Transition
   keepMounted
   onClose=handleClose
   aria-describedby="alert-dialog-slide-description"
 >

---

Original Material-UI V1 答案：

Dialog 组件公开了一个过渡道具，可用于覆盖默认值。 Dialog demo 中有一个示例（标记为 Alert Dialog 中的幻灯片），它使用了他们提供的幻灯片过渡：

import Slide from 'material-ui/transitions/Slide';

然后：

<Dialog open=this.state.open transition=Slide onRequestClose=this.handleRequestClose>

以下是它们提供的过渡组件：

Collapse Fade Grow Slide

如果这些都不能满足您的目的，您可以将它们用作创建自己的过渡组件的起点。