一个简单的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>
    )
  }

}

就到这里,下期见

    原文作者:强子
    原文地址: https://segmentfault.com/a/1190000019882813
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞