使用第三方的动画库 Animate.css

第一步 安装

cnpm i animate.css -S

第二步 在index.js 中进行引用css库

import 'animate.css'  //使用动画库

 第三步 在页面中使用

import React, { Component } from "react";
import { CSSTransition } from "react-transition-group";
export default class TransitonDemo1 extends Component {
  state = {
    show: false,
  };
  handerClick = () => {             //设置开关控制动画
    this.setState({
      show: !this.state.show,
    });
  };
  render() {
    return (
      <div>
        <button onClick={this.handerClick}>切换</button>
        <CSSTransition
          in={this.state.show} //true进场 false出场
          timeout={1000} //1s
          classNames={{
            enter: "animate__animated",            //固定 animate__animated
            enterActive: "animate__slideInLeft",   //进入效果  animate__slideInLeft（直接复制名字）
            exit: "animate__animated",             //固定 animate__animated
            exitActive: "animate__slideOutLeft",   //离开效果  animate__slideOutLeft
          }}
          unmountOnExit //可选  移出节点内容
        >
          <div>动态效果内容</div>
        </CSSTransition>
      </div>
    );
  }
}