Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/recharts/react-smooth
react animation
https://github.com/recharts/react-smooth
Last synced: 10 days ago
JSON representation
react animation
- Host: GitHub
- URL: https://github.com/recharts/react-smooth
- Owner: recharts
- License: mit
- Created: 2016-01-20T09:47:55.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2024-03-28T21:06:07.000Z (7 months ago)
- Last Synced: 2024-05-30T03:06:35.495Z (5 months ago)
- Language: JavaScript
- Size: 2.15 MB
- Stars: 277
- Watchers: 15
- Forks: 38
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# react-smooth
react-smooth is a animation library work on React.
[](https://badge.fury.io/js/react-smooth)
[](https://travis-ci.org/recharts/react-smooth)
[](https://www.npmjs.com/package/react-smooth)
[](https://gitter.im/recharts/react-smooth?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)
## install
```
npm install --save react-smooth
```
## Usage
simple animation
```jsx
```
steps animation
```jsx
const steps = [{
style: {
opacity: 0,
},
duration: 400,
}, {
style: {
opacity: 1,
transform: 'translate(0, 0)',
},
duration: 1000,
}, {
style: {
transform: 'translate(100px, 100px)',
},
duration: 1200,
}];
```
children can be a function
```jsx
{
({ opacity }) =>
}
```
you can configure js timing function
```js
const easing = configureBezier(0.1, 0.1, 0.5, 0.8);
const easing = configureSpring({ stiff: 170, damping: 20 });
```
group animation
```jsx
const appear = {
from: 0,
to: 1,
attributeName: 'opacity',
};
const leave = {
steps: [{
style: {
transform: 'translateX(0)',
},
}, {
duration: 1000,
style: {
transform: 'translateX(300)',
height: 50,
},
}, {
duration: 2000,
style: {
height: 0,
},
}]
}
{ list }
/*
* @description: add compatible prefix in style
*
* style = { transform: xxx, ...others };
*
* translatedStyle = {
* WebkitTransform: xxx,
* MozTransform: xxx,
* OTransform: xxx,
* msTransform: xxx,
* ...others,
* };
*/
const translatedStyle = translateStyle(style);
```
## API
### Animate
name
type
default
description
from
string or object
''
set the initial style of the children
to
string or object
''
set the final style of the children
canBegin
boolean
true
whether the animation is start
begin
number
0
animation delay time
duration
number
1000
animation duration
steps
array
[]
animation keyframes
onAnimationEnd
function
() => null
called when animation is finished
attributeName
string
''
style property
easing
string
'ease'
the animation timing function, support css timing function temporary
isActive
boolean
true
whether the animation is active
children
element
support only child temporary
### AnimateGroup
name
type
default
description
appear
object
undefined
configure element appear animation
enter
object
undefined
configure element appear animation
leave
object
undefined
configure element exit animation
## License
[MIT](http://opensource.org/licenses/MIT)
Copyright (c) 2015-2021 Recharts Group