ReAnimate

ReAnimate = React + Animate

install

npm i --save re-animate

Usage

<Animate to="0" attributeName="opacity">
  <div>
</Animate>

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

MIT

Current Tags

0.0.3 ... latest (10 years ago)

3 Versions

0.0.3 ... 10 years ago
0.0.2 ... 10 years ago
0.0.1 ... 10 years ago