react-smooth

popular esm
react animation library
Keywords
reactreactjsanimationreact-component
INSTALL
Type:
Version:
- Static
- Latest Patch
- Latest Minor
- Latest Major
- 4.0.4
- 4.0.3
- 4.0.2
- 4.0.1
- 4.0.0
- 3.0.0
- 2.0.5
- 2.0.4
- 2.0.3
- 2.0.2
- 2.0.1
- 2.0.0
- 1.0.6
- 1.0.5
- 1.0.4
- 1.0.2
- 1.0.1
- 1.0.0
- 0.3.0
- 0.2.0
- 0.1.20
- 0.1.19
- 0.1.18
- 0.1.17
- 0.1.16
- 0.1.15
- 0.1.14
- 0.1.13
- 0.1.12
- 0.1.11
- 0.1.10
- 0.1.9
- 0.1.8
- 0.1.7
- 0.1.6
- 0.1.5
- 0.1.4
- 0.1.3
- 0.1.2
- 0.1.1
- 0.1.0
- 0.0.15
- 0.0.14
- 0.0.13
- 0.0.12
- 0.0.11
- 0.0.10
- 0.0.9
- 0.0.8
- 0.0.7
- 0.0.6
- 0.0.5
- 0.0.4
- 0.0.3
- 0.0.2
- 0.0.1
<script type="module"> import reactSmooth from 'https://cdn.jsdelivr.net/npm/react-smooth@4.0.4/+esm' </script>
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
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 |
AnimateGroup
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
Copyright (c) 2015-2021 Recharts Group