一个简单的react-动画组件入场动画和出场动画实现

一：前言

关于 react 动画组件已经有很多，最近想自己做一个，目的就是依赖 css3 动画，这样能保证性能，项目种简单动画足够了；如果要复杂一些的动画，那就依赖于 js 了，本篇主要实现一个 Animate 组件，给组件内部添加元素的入场动画和出场动画，于是就花费半天时间试试，主要采用 animate.css，大家一定很熟悉，下面就是思路和代码，肯定有需要完善的地方，请各位大神批评指导。

二：Animate 组件

首先要引入 animate.css

import React from 'react';

export default class Animate extends React.Component {
    state = {
        animateName: '',// 切换动画 class 名称
        animateChild: null,// 做一个缓存
    }

    currentTime = new Date()

    componentWillReceiveProps(nextProps) {
        let prevChild = this.props.children
        let nextChild = nextProps.children
        let {enterClass, leaveClass} = this.props
        let expirationTime = new Date()
        if(!this._isExpiration(expirationTime)){return}// 防止过快点击
        this.currentTime = expirationTime
        if(nextChild !== null){
            this.setState({
                animateChild: nextChild,
                animateName: enterClass,
            })
        } else if (prevChild !== null) {
            this.setState({animateName: leaveClass,})
            setTimeout(()=>{
                this.setState({animateChild: null,})
            },500)// 离场延迟时间，也可以传 props
        } else {return}
    }

    _isExpiration(expirationTime) {return expirationTime.getTime() - this.currentTime.getTime() > 500}

    render() {const { animateName, animateChild} = this.state
        return (<span className={'animated' + animateName} style={{display: 'block'}}>
                {animateChild}
            </span>
        )
    }

}

三：调用

import React from 'react';
import styles from './index.less';
import Animate from '../components/index';

export default class AnimatedDemo extends React.Component {
  state = {show: false,}
  render() {const { show} = this.state

    return (<div className={styles.Reading_activity}>
        <Animate enterClass='slideInRight' leaveClass='bounceOutRight'>
          {show ? <div className={styles.site__title + ' ' + styles.mega}>Animate.css</div> : null}
        </Animate>
        <button onClick={()=>{this.setState({show: false})}}> 消失 </button>
        <button onClick={()=>{this.setState({show: true})}}> 出现 </button>
      </div>
    )
  }

}

就到这里，下期见