react-smooth v4.0.4
react-smooth
react-smooth is a animation library work on React.
install
npm install --save react-smooth
Usage
simple animation
<Animate to="0" from="1" attributeName="opacity">
<div />
</Animate>
steps animation
const steps = [{
style: {
opacity: 0,
},
duration: 400,
}, {
style: {
opacity: 1,
transform: 'translate(0, 0)',
},
duration: 1000,
}, {
style: {
transform: 'translate(100px, 100px)',
},
duration: 1200,
}];
<Animate steps={steps}>
<div />
</Animate>
children can be a function
<Animate from={{ opacity: 0 }}
to={{ opacity: 1 }}
easing="ease-in"
>
{
({ opacity }) => <div style={{ opacity }}></div>
}
</Animate>
you can configure js timing function
const easing = configureBezier(0.1, 0.1, 0.5, 0.8);
const easing = configureSpring({ stiff: 170, damping: 20 });
group animation
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,
},
}]
}
<AnimateGroup appear={appear} leave={leave}>
{ list }
</AnimateGroup>
/*
* @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
AnimateGroup
License
Copyright (c) 2015-2021 Recharts Group
9 months ago
9 months ago
9 months ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
4 years ago
5 years ago
6 years ago
6 years ago
7 years ago
7 years ago
8 years ago
8 years ago
8 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago