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

一：前言

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

二：Animate组件

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

}//防止过快点击