一、react-transition-group 常用组件和属性

1. 常用组件

CSSTransition         过度动画
SwitchTransition      显示隐藏动画
TransitionGroup       列表元素动画

2. 过渡动画的样式控制

入场动画
-appear              初始化开始
-appear-active       初始化执行
-appear-done         初始化结束
-enter               入场开始
-enter-active        入场执行
-enter-done          入场结束

离场动画
-exit                离场开始
-exit-active         离场执行
-exit-done           离场结束

3. 组件属性：in
   入场、离场动画触发时机

入场动画触发：in={true}
离场动画触发：in={false}

4. 组件属性：classNames
   入场、离场动画的类名，classNames="example"

入场动画触发类：.example-enter .example-enter-active .example-enter-done
离场动画触发类：.example-exit .example-exit-active .example-exit-done

5. 组件属性：timeout
   过渡动画持续时间：timeout={1000}

6. 组件属性：appear
   组件初始化时是否执行过渡动画

初始化执行：in={true}、appear={true}
初始化不执行：appear={false} 或者 无appear属性

7. 组件属性：动画执行，生命周期

onEnter          onEnter={(el) => console.log("开始进入", el)}
onEntering       onEntering={(el) => console.log("正在进入", el)}
onEntered        onEntered={(el) => console.log("进入完成", el)}
onExit           onExit={(el) => console.log("开始退出", el)}
onExiting        onExiting={(el) => console.log("正在退出", el)}
onExited         onExited={(el) => console.log("退出完成", el)}

二、react-transition-group 示例

1. 安装

npm install react-transition-group --save

2. 在组建中使用

import React, { Component } from "react";
import {
  CSSTransition,
  TransitionGroup,
  SwitchTransition,
} from "react-transition-group";
import "../static/style.css";
class AnimateView extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isShow: true,
      switched: true,
      list: [
        {
          username: "aaaaaaaa",
          password: "1111111",
        },
        {
          username: "bbbbbbbbbbbb",
          password: "2222222",
        },
      ],
    };
  }
  render() {
    return (
      <>
        <h1>七、react 动画</h1>
        <div>
          <h3>CSSTransition：过渡动画</h3>
          <div>
            <button
              onClick={() => this.setState({ isShow: !this.state.isShow })}
            >
              {this.state.isShow ? "动画离场" : "动画入场"}
            </button>
          </div>
          <div>
            <CSSTransition
              in={this.state.isShow}
              classNames="example"
              timeout={1000}
              appear
              onEnter={(el) => console.log("开始进入", el)}
            >
              <div> react 动画 </div>
            </CSSTransition>
          </div>
          <div style={{ margin: "50px" }}></div>
        </div>
        <hr />
        <div>
          <h3>SwitchTransition：显示隐藏过渡动画</h3>
          <button
            onClick={() => {
              this.setState({
                switched: !this.state.switched,
              });
            }}
          >
            {this.state.switched
              ? "SwitchTransition on"
              : "SwitchTransition off"}
          </button>
          <SwitchTransition mode={"in-out"}>
            <CSSTransition
              key={this.state.switched ? "on" : "off"}
              timeout={500}
              classNames="example"
            >
              <div>
                {this.state.switched
                  ? "SwitchTransition on"
                  : "SwitchTransition off"}{" "}
              </div>
            </CSSTransition>
          </SwitchTransition>
          <div style={{ margin: "50px" }}></div>
        </div>
        <hr />
        <div>
          <h3>TransitionGroup：列表元素过渡动画</h3>
          <div>
            <button
              onClick={() =>
                this.setState({
                  list: [
                    ...this.state.list,
                    {
                      username: "++++++++",
                      password: "--------",
                    },
                  ],
                })
              }
            >
              {"列表添加"}
            </button>
            <button
              onClick={() =>
                this.setState(() => {
                  this.state.list.pop();
                  return {
                    list: this.state.list,
                  };
                })
              }
            >
              {"列表删除"}
            </button>
          </div>
          <div>
            <TransitionGroup>
              {this.state.list.map((item, index) => {
                return (
                  <CSSTransition timeout={500} classNames="example" key={index}>
                    <div>
                      {item.username}-{item.password}
                    </div>
                  </CSSTransition>
                );
              })}
            </TransitionGroup>
          </div>
          <div style={{ margin: "50px" }}></div>
        </div>
      </>
    );
  }
}
export default AnimateView;

3. 定义动画样式
   新建 static/style.css

/* 动画入场 */
.example-enter,.example-appear {
    opacity: 0;
    transform: scale(0.8);
}
.example-enter-active,.example-appear-active {
    opacity: 1;
    transform: translateX(0);
    transition: opacity 0.5s, transform 0.5s;
}
.example-enter-done,.example-appear-done {
    opacity: 1;
    transform: translateX(0);
    transition: opacity 0.5s, transform 0.5s;
}

/* 动画离场 */
.example-exit {
    opacity: 1;
}
.example-exit-active {
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.5s, transform 0.5s;
}
.example-exit-done {
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.5s, transform 0.5s;
}