react-smooth
react-smooth is a animation library work on React.
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
to={{ opacity: 1 }}
easing="ease-in"
>
{
({ 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
$3
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 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 |
$3
name |
type |
default |
description |
appear |
object |
undefined |
configure element appear animation |
enter |
object |
undefined |
configure element appear animation |
leave |
object |
undefined |
configure element appear animation |
License
MIT
Copyright (c) 2015-2016 Recharts Group