react-animate-on-change


Animate your react components on props or state changes, in contrast to entries added/removed from arrays.

Install

``sh
npm install react-animate-on-change react
`

Usage

`js
import AnimateOnChange from 'react-animate-on-change'
// CommonJS:
// const AnimateOnChange = require('react-animate-on-change').default

// functional component
const Score = (props) =>
baseClassName="Score"
animationClassName="Score--bounce"
animate={props.diff != 0}>
Score: {props.score}

`

The example above will (roughly) render to:

On enter or changes in props.diff or props.score:
`html

Score: 100

`

On animation end:
`html

Score: 100

`

Also, see the example folder.

Props


baseClassName {string} : Base class name that be added to the component.

animationClassName {string} : Animation class name. Added when animate == true. Removed when the event animationend is triggered.

animate {bool} : Whether component should animate.

customTag {string} : HTML tag of the component.

onAnimationEnd {() => void)} : Callback which is called when animation ends.

Develop


Setup:
`sh
npm install
cd test
npm install
cd ..
`

Add tests in test/client-tests.js, start tests with:
`
npm test
`

Build and view example:
`
npm run build-example
open example/index.html
``

Known issues

- The browser must support CSS3 animations.