1.1.1 • Published 2 years ago
react-easy-transitions v1.1.1
React Transitions
Low verbose, JSX tags that provides transitions for a single object while it's mounting and unmounting.
Right now its uses the Hooks API and works with functional components.
The ready-to-use transitions are:
- Fade;
- Scale;
- SlideLeft;
SlideRight;
Install with:
npm install react-easy-transitions
Or
yarn add react-easy-transitions
Import to you project with
import Animation from 'react-easy-transitions'
And use it like:
const [visible, setVisible] = useState(false)
<Animation.Fade controller={visible}>
<MyObject />
</Animation.Fade>
Also, you can customize the animation, passing the duration, a CSS class for the mount and another for the unmount, like so:
<Animation.Custom
controller={someStatefulVariable}
time={200}
animIn={"slideLeft"}
animOut={"slideRight"}
>
<SomeCoolObject />
</Animation.Custom>
* Please note that the Animation will not work with already animated components, though it will be fixed in a near future.