fade-propsuses CSS animations and doesn't rely on
yarn add fade-props
npm i -S fade-props
UsageImport the component:
This is a UMD build, so "require" and "global" methods are also supported.
import FadeProps from 'fade-props';
Place your child component inside
Now, when the child component changes, it will animate (fade) to the other component, or fade out if the child component was removed.
FadePropscomponent accepts an
animationLengthprop which you can set to control the length of the fade animation; the default value is
200. The total transition time will be twice this if fading between two components (for fading one component out, and fading the next component in).
Running the demoClone the repository and
cdinto it, run
yarn install) to install all dependencies, then run
npm startto start the webpack dev server. Visit
http://localhost:8080in your browser to view the demo.
Any contributions and feedback are welcome.