# preact-animate-on-change

**Repository Path**: mirrors_developit/preact-animate-on-change

## Basic Information

- **Project Name**: preact-animate-on-change
- **Description**: Animate your components on state change
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-08-08
- **Last Updated**: 2026-07-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# preact-animate-on-change

> THIS IS A FORK of [`react-animate-on-change`][1] WHICH WORKS WITH PREACT.

[![](https://saucelabs.com/browser-matrix/arve0.svg)](https://saucelabs.com/u/arve0)

Animate your react components on props or state changes, in contrast to [entries added/removed from arrays](https://facebook.github.io/react/docs/animation.html).

<img src="demo.gif" width="300">

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

## Usage
```js
const AnimateOnChange = require('react-animate-on-change')

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

The example above will (roughly) render to:

**On enter or changes in `props.diff` or `props.score`:**
```html
<span class="Score Score--bounce">
  <span>Score: 100</span>
</span>
```

**On animation end:**
```html
<span class="Score">
  <span>Score: 100</span>
</span>
```

Also, [see the example folder](example).

## 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`](http://www.w3.org/TR/css3-animations/#animationend) is triggered.

`animate {bool}` : Wheter component should animate.

## Develop
```sh
npm start
```
Add tests in [test.js](test.js) and hack away.

## Known issues
- The browser must support CSS3 animations, doh.

[1]: https://github.com/arve0/react-animate-on-change