@micheg/preact-animated-css-fork NPM

preact-animated-css

Preact component to show or hide elements with animations using Animated.css This is a fork created to fix some bugs and add compatibility with animate.css version 4

demo

(by the original author, Fareed Alnamrouti digital.flowers@hotmail.com)

https://digital-flowers.github.io/react-animated-css.html

install

npm i @micheg/preact-animated-css-fork --save

Note 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/4.1.1/animate.min.css">
</head>

or even better:

npm i animate.css --save

If you use a bundler, for example parcel:

import 'animate.css';

how to use

very easy to use, just wrap your content with the animated component

import 'animate.css';
import {Animated} from "@micheg/preact-animated-css-fork";

<Animated animationIn="bounceInLeft" animationOut="fadeOut" isVisible={true}>
    <div>
        hello world ;)
    </div>
</Animated>

then you can just toggle the isVisible property to see the animation.

Properties

animationIn animation in name, default "fadeIn"
animationOut animation out name, default "fadeOut"
animationInDelay animation in delay, default 0
animationOutDelay animation out delay, default 0
animationInDuration animation in delay, default 1000
animationOutDuration animation out delay, 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

List of animation

All the following animation from animated.css are supported.

Animation Name
`bounce`
`flash`
`pulse`
`rubberBand`
`shakeX`
`shakeY`
`headShake`
`swing`
`tada`
`wobble`
`jello`
`heartBeat`
`backInDown`
`backInLeft`
`backInRight`
`backInUp`
`backOutDown`
`backOutLeft`
`backOutRight`
`backOutUp`
`bounceIn`
`bounceInDown`
`bounceInLeft`
`bounceInRight`
`bounceInUp`
`bounceOut`
`bounceOutDown`
`bounceOutLeft`
`bounceOutRight`
`bounceOutUp`
`fadeIn`
`fadeInDown`
`fadeInDownBig`
`fadeInLeft`
`fadeInLeftBig`
`fadeInRight`
`fadeInRightBig`
`fadeInUp`
`fadeInUpBig`
`fadeInTopLeft`
`fadeInTopRight`
`fadeInBottomLeft`
`fadeInBottomRight`
`fadeOut`
`fadeOutDown`
`fadeOutDownBig`
`fadeOutLeft`
`fadeOutLeftBig`
`fadeOutRight`
`fadeOutRightBig`
`fadeOutUp`
`fadeOutUpBig`
`fadeOutTopLeft`
`fadeOutTopRight`
`fadeOutBottomRight`
`fadeOutBottomLeft`
`Flippers`
`flip`
`flipInX`
`flipInY`
`flipOutX`
`flipOutY`
`Lightspeed`
`lightSpeedInRight`
`lightSpeedInLeft`
`lightSpeedOutRight`
`lightSpeedOutLeft`
`rotateIn`
`rotateInDownLeft`
`rotateInDownRight`
`rotateInUpLeft`
`rotateInUpRight`
`rotateOut`
`rotateOutDownLeft`
`rotateOutDownRight`
`rotateOutUpLeft`
`rotateOutUpRight`
`Specials`
`hinge`
`jackInTheBox`
`rollIn`
`rollOut`
`zoomIn`
`zoomInDown`
`zoomInLeft`
`zoomInRight`
`zoomInUp`
`zoomOut`
`zoomOutDown`
`zoomOutLeft`
`zoomOutRight`
`zoomOutUp`
`slideInDown`
`slideInLeft`
`slideInRight`
`slideInUp`
`slideOutDown`
`slideOutLeft`
`slideOutRight`
`slideOutUp`

note by the original author, Fareed Alnamrouti digital.flowers@hotmail.com:

From React 17.x.x componentWillReceiveProps will be deprecated and a different strategy is introduced.

react animated animation animated.css

browser-or-node classnames lodash.camelcase lodash.isplainobject preact prop-types

@everything-registry/sub-chunk-600

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago