@react-efficiency/animate

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

``tsx
import Animate from '@react-efficiency/animate'
import * as React from 'react'

export const Demo: React.FunctionComponent = () => {
  Const [state, setState] = React.useState({ in: false })

  Const startAnimate = () => {
    setState({ in: !state.in })
  }

  Return (
    

      
        

content

      

      animate
    

  )
}
`

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
`scss
.animateKey {
  Opacity: 0;
 
  &.animateKey--entering {
    Opacity: 0;
  }

  &.animateKey--entered {
    Opacity: 1;
  }
}
``