react过渡动效

过渡动效在项目中是一个必须的业务
React过渡动效通过react-transition-group和animate.css第三方模块来实现

代码演示
App.js

import React, { Component } from 'react'
import {CSSTransition} from 'react-transition-group'
export default class App extends Component {
  state={
    flag:true
  }
  changeFlag=()=>{
    this.setState({
      flag:!this.state.flag
    })
  }
  render() {
    const {flag}=this.state
    return (
      <div>
        <h3>过渡动效</h3>
        <button onClick={this.changeFlag}>修改flag</button>
        <CSSTransition
          in={flag}//跟控制动画元素的状态
          classNames={{
            enter:"animate__animated",//进入的类名
            enterActive:"animate__slideInLeft",//进入过程
            exit:"animate__animated",//离开
            exitActive:"animate__slideOutLeft"//离开过程
          }}
          unmountOnExit//卸载，离开时卸载CSSTransition
          timeout={4000}//过渡时间
        >
          <p>动画元素</p>
        </CSSTransition>
      </div>
    )
  }
}

可以与Vue的过渡动效进行比较

<transition
  enter-active-class="animate__animated animate__slideInLeft"
  leave-active-class="animate__animated animate__slideOutLeft"
>
</transition>