React component to show or hide elements with animations using Animated.css
https://digital-flowers.github.io/react-animated-css.html
npm i react-animated-css --saveNote You have to include Animated.css in your html page, this component is just a wrapper for it.
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
</head>very easy to use, just wrap your content with the animated component
import {Animated} from "react-animated-css";
<Animated animationIn="bounceInLeft" animationOut="fadeOut" isVisible={true}>
<div>
hello world ;)
</div>
</Animated>then you can just toggle the isVisible property to see the animation.
- animationIn animation in name, default "fadeIn"
- animationOut animation out name, default "fadeOut"
- animationInDelay animation in delay (milliseconds), default 0
- animationOutDelay animation out delay (milliseconds), default 0
- animationInDuration animation in duration (milliseconds), default 1000
- animationOutDuration animation out duration (milliseconds), default 1000
- style react style property for the inner component
- isVisible if the component is visible or not, default true
- innerRef react ref property for the inner component
- className react className property for the inner component
- animateOnMount apply animationIn on mount or not, default true
All the following animation from animated.css are supported.
| Animation Name |
|---|
bounce |
flash |
pulse |
rubberBand |
shake |
headShake |
swing |
tada |
wobble |
jello |
bounceIn |
bounceInDown |
bounceInLeft |
bounceInRight |
bounceInUp |
bounceOut |
bounceOutDown |
bounceOutLeft |
bounceOutRight |
bounceOutUp |
fadeIn |
fadeInDown |
fadeInDownBig |
fadeInLeft |
fadeInLeftBig |
fadeInRight |
fadeInRightBig |
fadeInUp |
fadeInUpBig |
fadeOut |
fadeOutDown |
fadeOutDownBig |
fadeOutLeft |
fadeOutLeftBig |
fadeOutRight |
fadeOutRightBig |
fadeOutUp |
fadeOutUpBig |
flipInX |
flipInY |
flipOutX |
flipOutY |
lightSpeedIn |
lightSpeedOut |
rotateIn |
rotateInDownLeft |
rotateInDownRight |
rotateInUpLeft |
rotateInUpRight |
rotateOut |
rotateOutDownLeft |
rotateOutDownRight |
rotateOutUpLeft |
rotateOutUpRight |
hinge |
jackInTheBox |
rollIn |
rollOut |
zoomIn |
zoomInDown |
zoomInLeft |
zoomInRight |
zoomInUp |
zoomOut |
zoomOutDown |
zoomOutLeft |
zoomOutRight |
zoomOutUp |
slideInDown |
slideInLeft |
slideInRight |
slideInUp |
slideOutDown |
slideOutLeft |
slideOutRight |
slideOutUp |
Its 100% smoothly and it looks really nice in some components
From React 17.x.x componentWillReceiveProps will be deprecated and a different strategy is introduced.