Dead-simple component to fade in an element's children.
Dead-simple and opinionated component to fade in an element's children.
npm install react-fade-in
import FadeIn from 'react-fade-in'; // ...Element 1Element 2Element 3Element 4Element 5Element 6
Animates its children, one by one.
Note: To have children animate separately, they must be first-level children of thecomponent (i.e. members of itsprops.children).
delay: Default: 50. Delay between each child's animation in milliseconds.
transitionDuration: Default: 400. Duration of each child's animation in milliseconds.
className: No default. Adds a
classNameprop to the container div.
childClassName: No default. Adds a
classNameprop to each child div, allowing you to style the direct children of the
"div". Override the HTML element of the wrapping div.
"div". Override the HTML element wrapped around each child element.
visible: New in 2.0.0: If not
visibleprop can be used to control when the fade in occurs. If set to
falseafter the fade-in animation completes, the children will fade out one by one.
onComplete: New in 2.0.0: specifies a callback to be called when the animation completes.