如何配置MUI Slide实现Dialog打开和关闭时均向上滑动过渡

实现方法 #

你遇到的问题是因为MUI的Slide组件默认退出动画是进入动画的反向，固定direction="up"时，进入是从下往上滑入，退出就会从上往下滑出。要实现退出也向上滑动的效果，只需要根据组件的in状态动态调整direction参数即可，in属性是过渡组件默认接收的状态，值为true代表弹窗进入展示，值为false代表弹窗退出隐藏。

修改后的代码 #

const Transition = React.forwardRef(function Transition(props, ref) {
    // 从props中解构出过渡状态
    const { in: isEntering } = props;
    return <Slide
        // 进入时从下方滑入（对应direction=up），退出时往上方滑出（对应direction=down）
        direction={isEntering ? "up" : "down"}
        mountOnEnter
        unmountOnExit
        ref={ref} {...props} />;
});

<Dialog
    open={openDialog}
    TransitionComponent={Transition}
    keepMounted
    onClose={handleClickAway}
>

注意事项 #

• 该写法兼容MUI v4、v5所有版本
• 如果你给Dialog自定义了额外的动画样式，需要排查是否有样式优先级高于Slide内置过渡效果，导致动画不生效

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