在 Material UI 中创建自定义过渡答案

【问题标题】：Create custom transition in Material UI Next在 Material UI 中创建自定义过渡
【发布时间】：2018-08-25 15:49:32
【问题描述】：

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

我尝试自己安装react-transition-group 来制作一个，但每次我尝试导入它时都试图进入material-ui 节点模块并出于某种原因从那里加载它。

如何更新现有的转换或从react-transition-group 组件创建自己的转换

【问题讨论】：

标签： reactjs transition material-ui react-transition-group

【解决方案1】：

试试这个 DialogAnimation.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;

您可以在 Dialog TransitionComponent 属性中使用它：

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

【讨论】：