Reactjs 下一步在材质UI中创建自定义过渡

我想使用淡入淡出过渡显示一个加载动画的覆盖，但淡入淡出组件只处理不透明度，元素仍然存在。我想创建一个自定义动画，以确保覆盖元素在淡入之前不会呈现在我的内容顶部

我尝试自己安装

react transition group

，但每次尝试导入时，它都试图进入

material ui

节点模块，并出于某种原因从那里加载它

---

如何更新现有转换，或者如何从

react transition group

组件创建自己的转换，请尝试以下对话框animation.jsx：

import * as React from 'react';
import Transition from 'react-transition-group/Transition';

// default css props
const defaultStyle = {
    transform: 'translate3d(0, -20px, 0)',
    opacity: 0,
};

// custom css props in 4 state: entering, entered, exiting, exited
const styles = {
    entered: {
        opacity: 1,
        transform: 'translate3d(0, 0, 0)',
    },
};

class DialogAnimation extends React.Component {
    static defaultProps = {
        in: false,
        duration: 300
    };

    render() {
        const {
            children,
            style: styleProp,
            duration,
            ...other
        } = this.props;
        const style = {
            ...styleProp,
            ...(React.isValidElement(children)
                ? (children.props).style
                : {})
        };
        return (
            <Transition timeout={duration} appear={true} {...other}>
                {(state, childProps) => {
                    return React.cloneElement(children, {
                        style: {
                            ...defaultStyle,
                            transition: 'all ' + duration + 'ms ease',
                            transitionProperty: 'transform, opacity',
                            willChange: 'transform, opacity',
                            ...styles[state],
                            ...style
                        },
                        ...childProps
                    });
                }}
            </Transition>
        );
    }
}

export default DialogAnimation;

import*as React from'React'；
从“反应转换组/转换”导入转换；
//默认css道具
常量defaultStyle={
转换：“translate3d（0，-20px，0）”，
不透明度：0，
};
//自定义css道具处于4种状态：进入、进入、退出、退出
常量样式={
输入：{
不透明度：1，
转换：“translate3d（0,0,0）”，
},
};
类DialogAnimation扩展了React.Component{
静态defaultProps={
中：错，
持续时间：300
};
render（）{
常数{
儿童
style:styleProp，
期间
……其他
}=这是道具；
常量样式={
…styleProp，
…（React.isValidElement（儿童）
？（儿童。道具）。风格
: {})
};
返回(
{（状态，childProps）=>{
返回React.cloneElement（儿童、{
风格：{
…默认样式，
过渡：“全部”+持续时间+“毫秒缓解”，
transitionProperty:“变换，不透明度”，
willChange:“变换，不透明度”，
…样式[状态]，
风格
},
…儿童道具
});
}}
);
}
}
导出默认对话框动画；

您可以在对话框TransitionComponent属性中使用它：

function Transition(props) {
    return <DialogAnimation {...props} />;
}
<Dialog
    TransitionComponent={Transition}
>

功能转换（道具）{
返回；
}