preact-animate-on-change

THIS IS A FORK of react-animate-on-change WHICH WORKS WITH PREACT.

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

Install

yarn add preact-animate-on-change preact

Usage

import AnimateOnChange from 'preact-animate-on-change'

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

The example above will (roughly) render to:

On enter or changes in diff or score:

<span class="Score Score--bounce">
  <span>Score: 100</span>
</span>

On animation end:

<span class="Score">
  <span>Score: 100</span>
</span>

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.

Require Source Code

You can require the source file directly as it's part of the npm package, however you need to make sure to run it via babel-loader. This can be useful when debugging your applicated.

import Animated from 'preact-animate-on-change/src'

<Animated />

Develop

yarn start

Add tests in test.js and hack away.

Known issues

• The browser must support CSS3 animations, doh.