Create custom transition in Material UI Next

Question

I wanted to use the fade transition to show an overlay with a loading animation but the fade component only handles opacity and the element is still there. I want to create a custom animation to make sure that the overlay element is not rendered on top of my content until it's time to fade in.

I tried installing the react-transition-group myself to make one but every time I try to import it's trying to go into the material-ui node module and load it from there for some reason.

How can I either update the existing transition or be able to create my own from the react-transition-group component

karim fereidooni · Answer 1 · 2018-10-01T08:34:16.160

Try this 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;

and you can use it in Dialog TransitionComponent property:

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

Create custom transition in Material UI Next

1 Answers1