Package Exports

react-simple-animate

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-simple-animate) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React Simple Animate

Make web animation simple 👏

Features:

Simple animation from inline style A to style B
Make animation toggle easy
In build delay animation mechanic

Install

$ yarn add react-simple-animate
or
$ npm install react-simple-animate

Example

Navigate into example folder and install

$ yarn && yarn start
or
$ npm install && npm start

Quick start

import react from 'react';
import Animate from 'react-simple-animate'

export default function SexyComponent() {
    return <Animate durationSeconds={0.2}
         startAnimation
         delaySeconds={1.2}
         startStyle={{
           opacity: 0,
           transform: 'translateY(100px)',
         }}
         endStyle={{
           opacity: 1,
           transform: 'translateY(0)',
         }}
       >
       <YourComponent> // your component here
    </Animate>;
}

API

startAnimation: boolean

Defaults to false. Set to true to start the animation.

children: node

Child component to be animated.

startStyle: string (optional)

Component initial inline style.

endStyle: string

Component transition to inline style.

onCompleteStyle: string (optional)

Style to be applied after the animation is completed.

durationSeconds: number

How long the animation takes in seconds.

delaySeconds: number (optional)

How much delay should apply before animation starts.

onComplete: boolean (optional)

Call back function after animation complete.

easeType: string (optional)

Easing type refer to http://easings.net/

className: string (optional)

To specify a CSS class

forceUpdate?: boolean

Force component to re-render.