Non-Permeable Membrane

    preact-animated-css
    TypeScript icon, indicating that this package has built-in type declarations

    1.3.2 • Public • Published

    preact-animated-css

    Preact component to show or hide elements with animations using Animated.css

    demo

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

    install

    npm i preact-animated-css --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/3.5.2/animate.min.css">
    </head>

    how to use

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

    import {Animated} from "preact-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.

    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
    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

    note:

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

    Install

    npm i preact-animated-css

    DownloadsWeekly Downloads

    2

    Version

    1.3.2

    License

    ISC

    Unpacked Size

    25.4 kB

    Total Files

    14

    Last publish

    Collaborators

    • szombatipeter