CSSTransitionHOC.md

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

const duration = 300;

const defaultStyle = {
  transition: `all ${duration}ms ease-in-out`,
  opacity: 0,
  top: 1000
}

const transitionStyles = {
  entering: { opacity: 0, top: 1000 },
  entered:  { opacity: 1, top: 0 },
};

export const TransitionAnimation = (Module) => {

    return class AnimateHOC extends React.Component {
        state = {in:false}

        componentDidMount() {
            this.setState({ in: true })
        }
        

        render(){
            return(
                <Transition in={this.state.in} timeout={duration}>
                    {(state) => (
                    <div style={{
                        ...defaultStyle,
                        ...transitionStyles[state]
                    }}>
                        <Module {...this.props} />
                    </div>
                    )}
                </Transition>
            )
        }
    }
}