README
ReAnimate
ReAnimate = React + Animate
install
npm i --save re-animate
Usage
<Animate to="0" attributeName="opacity">
<div>
</Animate>
or
const steps = [{
style: {
opacity: 0,
},
moment: 400,
}, {
style: {
opacity: 1,
transform: 'translate(0, 0)',
},
moment: 1000,
}, {
style: {
transform: 'translate(100px, 100px)',
},
moment: 1200,
}];
<Animate steps={steps}>
<div>
</Animate>
API
props
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 | () => {} | 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 |
License
Copyright (c) 2015-2016 Recharts Group