react-simple-animate
Advanced tools
+1
-1
| { | ||
| "name": "react-simple-animate", | ||
| "version": "1.3.1", | ||
| "version": "1.3.2", | ||
| "description": "react simple animate", | ||
@@ -5,0 +5,0 @@ "main": "lib/animate.js", |
+19
-39
@@ -13,15 +13,15 @@ # React Simple Animate | ||
| $ yarn add react-simple-animate | ||
| $ yarn add react-simple-animation | ||
| or | ||
| $ npm install react-simple-animate | ||
| $ npm install react-simple-animation | ||
| ## Example | ||
| Navigate into `example` folder and install | ||
| Navgiate into `example` folder and install | ||
| $ yarn && yarn start | ||
| $ yarn | ||
| or | ||
| $ npm install && npm start | ||
| $ npm install | ||
| <img src="https://github.com/bluebill1049/react-simple-animate/blob/master/example/screenShot.png" alt="Sceen" width="400"/> | ||
| <img src="https://github.com/bluebill1049/react-simple-animate/blob/feature/example-readme-update/example/screenShot.png" alt="Sceen" width="400"/> | ||
@@ -52,34 +52,14 @@ ## Quick start | ||
| 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. | ||
| | Prop | Type | Required | Description | | ||
| | :--- | :--- | :---: | :--- | | ||
| | `startAnimation` | boolean | ✓ | Defaults to false. Set to true to start the animation. | | ||
| | `children` | node | ✓ | Child component to be animated. | | ||
| | `startStyle` | string | | Component initial inline style. | | ||
| | `endStyle` | string | ✓ | Component transition to inline style. | | ||
| | `onCompleteStyle` | string | | Style to be applied after the animation is completed. | | ||
| | `durationSeconds` | number | | How long the animation takes in seconds. | | ||
| | `delaySeconds` | number | | How much delay should apply before animation starts. | | ||
| | `onComplete` | function | | Call back function after animation complete. | | ||
| | `easeType` | string | | Easing type refer to http://easings.net/ | | ||
| | `className` | string | | To specify a CSS class. | | ||
| | `forceUpdate` | boolean | | Force component to re-render. | |
21210
0.39%64
-22.89%