Nicer Package Manager

    @react-efficiency/animate
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.3 • Public • Published

    Installation

    yarn yarn add @react-efficiency/animate

    npm npm install @react-efficiency/animate --save

    Features

    Time dynamic generation of transition all {time}ms ease-in-out

    Simple example

    import Animate from '@react-efficiency/animate'
    import * as React from 'react'
    
    export const Demo: React.FunctionComponent<any> = () => {
      Const [state, setState] = React.useState({ in: false })
    
      Const startAnimate = () => {
        setState({ in: !state.in })
      }
    
      Return (
        <div>
          <Animate in={state.in} animateKey={['fade']}>
            <div>content</div>
          </Animate>
    
          <button onClick={startAnimate}>animate</button>
        </div>
      )
    }

    Props extends Partial

    props type desc
    animateKey string[] Animated keys, can be combined, reference animateKey
    animateCssModule object cssModule

    Other props reference [TransitionProps] (https://reactcommunity.org/react-transition-group/css-transition)

    Animation status

    Refer to [TransitionProps] (https://reactcommunity.org/react-transition-group/css-transition)

    • entered
    • entering
    • exited
    • exiting
    • unmounted

    animateKey

    CSS definition for each state

    .animateKey {
      Opacity: 0;
     
      &.animateKey--entering {
        Opacity: 0;
      }
    
      &.animateKey--entered {
        Opacity: 1;
      }
    }

    Keywords

    Install

    npm i @react-efficiency/animate

    DownloadsWeekly Downloads

    1

    Version

    0.0.3

    License

    MIT

    Unpacked Size

    19.4 kB

    Total Files

    13

    Last publish

    Collaborators

    • a450215151