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 the CSS animations
If your project has set up appropriate CSS loaders, just import the 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="..." /></ReactTransitions>
ReactTransitions Props | Type | Description |
---|---|---|
transition | string, required | See transitions |
width | number (in px) or string, required | |
height | number (in px) or string, required | |
childern | 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.