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

【问题标题】：Change animation of material-ui dialog show更改material-ui对话框显示的动画
【发布时间】：2017-03-27 03:55:27
【问题描述】：

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

【问题讨论】：

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

标签： html css reactjs material-ui

【解决方案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}>

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

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

【讨论】：