Animations in React

REACTAN-1: Installation

React Transistions can be done use the ReactCSSTransitionGroup.

Since React uses the virtual DOM, we don't get a chance to directly apply a CSS transition like you normally would with jQuery or JS.

To install: yarn add react-addons-css-transition-group

In the JS file:

import ReactCSSTransitionGroup from 'react-addons-css-transition-group';

export default class Transition extends Component {
    render() {
        return {
            <ReactCSSTransitionGroup>
                { list }
            </ReactCSSTransitionGroup>
        }
    }
}
copy

By default, <ReactCSSTransitionGroup> renders as a span, but we can give it a component property to change it! E.g. <ReactCSSTransitionGroup component="ul">

To access the property for animations, we need to set a property of transitionName.

E.g. <ReactCSSTransitionGroup component="ul" transitionName="slide">

There are a couple of other noteworthy properties:

<ReactCSSTransitionGroup
  component="ul"
  transitionName="slide"
  transitionEnterTimeout={500} // this is for the duration of the transition in ms
  transitionLeaveTimeout={500} // transition for leaving the DOM
  transitionAppear={true} // transition for the ReactCSSTransitionGroup component
  transitionAppearTimeout={500} // time for is
>
  {list}
</ReactCSSTransitionGroup>
copy

REACTAN-2: Using CSS to now run the Transitions and Transforms

// in the css file

/* start enter state */
.slide-enter {
    transform: translateX(-100%);
}

/* end enter state */
.slide-enter.slide-enter-active {
    transform: translateX(0);
    transition: transform 0.5s ease-out;
}

/* start leave state */
.slide-leave {
    transform: translateX(0);
}

/* end leave state */
.slide-leave.slide-leave-active {
    transform: translateX(-100%);
    opacity: 0;
    transition: 0.5s ease-in;
}

/* initial mounting */
.slide-appear {
    opacity: 0;
}

.slide-appear.slide-appear-active {
    opacity: 1;
    transition: opacity 0.5s ease-in;
}
copy