react-transitions

A collection of transitions to animate React components when they enter or leave the DOM.

Demo

Check out the live demo for available built-in animations.

Installation

npm install -s react-transitions

Usage

Import the component

import ReactTransitions from 'react-transitions';

Import the CSS animations

If your project has set up appropriate CSS loaders, just import the CSS

import 'react-transitions/dist/animations.css';

If you need to include the stylesheet otherwise, associate the file here.

Render

<ReactTransitions
  transition="move-to-left-move-from-right"
  width={ 600 }
  height={ 300 }
>
  {/* The child element put here changes with animation. */}
  <img key="uniqueKey" src="https://github.com/szchenghuang/react-transitions/raw/master/.." />
</ReactTransitions>

ReactTransitions Props	Type	Description
transition	string, *required*	See transitions
width	number (in px) or string, *required*
height	number (in px) or string, *required*
children	element, or null	Restricted to a single element in that it is animated as a whole.

Transitions

This package comes with a set of animated transitions out of the box. ReactTransitions.Transitions makes a list of their names. Each name is a string to be supplied to transition prop of ReactTransitions.

Here are a few of the names for illustration:

"move-to-left-move-from-right",
"fade-move-from-right",
"scale-down-move-from-right",
"rotate-right-side-first-move-from-right"

There are some more options ready for you. Either make use of the demo page to see the full list, or dump the contents of ReactTransitions.Transitions which should always be up-to-date.

Acknowledgement

The CSS aminations used in this package are based on resources on Codrops with adequate adoption for React. Thanks for the awesome creation shared by Codrops.

License

MIT. See LICENSE.md for details.

szchenghuang / react-transitions

readme