1、react-transition-group介绍

安装：npm install react-transition-group --save
或者：yarn add react-transition-group
react-transition-group主要包含四个组件：

1.1、Transition

• 该组件是一个和平台无关的组件（不一定要结合CSS）；
• 在前端开发中，我们一般是结合CSS来完成样式，所以比较常用的是CSSTransition；

1.2、CSSTransition

• 在前端开发中，通常使用CSSTransition来完成过渡动画效果

1.3、SwitchTransition

• 两个组件显示和隐藏切换时，使用该组件

1.4、TransitionGroup

• 将多个动画组件包裹在其中，一般用于列表中元素的动画；

2、react-transition-group使用

2.1、CSSTransition

1、CSSTransition是基于Transition组件构建的：

• CSSTransition执行过程中，有三个状态：appear、enter、exit；
• 它们有三种状态，需要定义对应的CSS样式：
  • 第一类，开始状态：对于的类是-appear、-enter、exit；
  • 第二类：执行动画：对应的类是-appear-active、-enter-active、-exit-active；
  • 第三类：执行结束：对应的类是-appear-done、-enter-done、-exit-done；

2、CSSTransition常见对应的属性：

• in：触发进入或者退出状态
  • 如果添加了unmountOnExit={true}，那么该组件会在执行退出动画结束后被移除掉；
  • 当in为true时，触发进入状态，会添加-enter、-enter-acitve的class开始执行动画，当动画执行结束后，会移除两个class，并且添加-enter-done的class；
  • 当in为false时，触发退出状态，会添加-exit、-exit-active的class开始执行动画，当动画执行结束后，会移除两个class，并且添加-enter-done的class；
• classNames：动画class的名称：决定了在编写css时，对应的class名称：比如card-enter、card-enter-active、card-enter-done；
• timeout：过渡动画的时间
• appear：是否在初次进入添加动画（需要和in同时为true）

3、CSSTransition对应的钩子函数：主要为了检测动画的执行过程，来完成一些JavaScript的操作

• onEnter：在进入动画之前被触发；
• onEntering：在应用进入动画时被触发；
• onEntered：在应用进入动画结束后被触发；

// CSSTransitionDemo.js
import React, { PureComponent } from 'react';
import { CSSTransition } from 'react-transition-group';
import { Card, Avatar } from 'antd';
import { EditOutlined, EllipsisOutlined, SettingOutlined } from '@ant-design/icons';
import './CSSTransition.css'
const { Meta } = Card;

export default class CSSTransitionDemo extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      isShow: true
    };
  }
  render() {
    const { isShow } = this.state;
    return (
      <div>
        <button onClick={e => {
          this.setState({
            isShow: !isShow
          })
        }}> 显示/隐藏 </button>
        <CSSTransition in={isShow}
          classNames={"card"}
          timeout={300}
          unmountOnExit={true}
          appear={false}
        >
          <Card
            style={{ width: 300 }}
            cover={
              <img
                alt="example"
                src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"
              />
            }
            actions={[
              <SettingOutlined key="setting" />,
              <EditOutlined key="edit" />,
              <EllipsisOutlined key="ellipsis" />,
            ]}
          >
            <Meta
              avatar={<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />}
              title="Card title"
              description="This is the description"
            />
          </Card>
        </CSSTransition>
      </div>
    );
  }
}

对应的css样式

.card-enter, .card-appear {
    opacity: 0;
    transform: scale(0.6);
}
.card-enter-active, .card-appear-active {
    opacity: 1;
    transform: scale(1);
    transition: opacity 300ms, transform 300ms;
}
.card-enter-done, .card-appear-done {
 opacity: 1;
}
.card-exit {
    opacity: 1;
    transform: scale(1);
}
.card-exit-active {
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 300ms, transform 300ms; 
}
.card-exit-done {
    opacity: 0;
}

2.2. SwitchTransition

SwitchTransition组件里面要有CSSTransition或者Transition组件，不能直接包裹你想要切换的组件
SwitchTransition里面的CSSTransition或Transition组件不再像以前那样接受in属性来判断元素是何种状态，取而代之的是key属性；
1、SwitchTransition中主要有一个属性：mode，有两个值

• in-out：表示新组件先进入，旧组件再移除；
• out-in：表示就组件先移除，新组建再进入；
  比如实现动画：
  有一个按钮需要在on和off之间切换，希望看到on先从左侧退出，off再从右侧进入
  通过react-transition-group中使用SwitchTransition来实现该动画；

// SwitchTransitionDemo.js
import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import { CSSTransition, SwitchTransition } from "react-transition-group";
import './SwitchTransition.css'
class SwitchTransitionDemo extends PureComponent {
    static propTypes = {}

    constructor(props) {
        super(props)

        this.state = {
            isOn: true
        }
    }

    render() {
        const { isOn } = this.state;
        return (
            <div>
                <SwitchTransition mode={"out-in"}>
                    <CSSTransition key={isOn ? "On" : "Off"}
                        classNames={"btn"}
                        timeout={300}>
                        <button onClick={e => {
                            this.setState({
                                isOn: !isOn
                            })
                        }}> {isOn ? "On" : "Off"}</button>
                    </CSSTransition>
                </SwitchTransition>
            </div>
        )
    }
}
export default SwitchTransitionDemo

css效果实现如下

.btn-enter {
    opacity: 0;
    transform: translateX(100%);
}

.btn-enter-active {
    opacity: 1;
    transform: translateX(0);
    transition: opacity 1000ms, transform 1000ms;
}

.btn-exit {
    opacity: 1;
    transform: translateX(0);
}
.btn-exit-active {
    opacity: 0;
    transform: translateX(100%);
    transition: opacity 1000ms, transform 1000ms;
}

注意：动画的最终执行时间是由 transition决定的，而timeout是classname的修改用时。

2.3. TransitionGroup

当有一组动画时，需要将这些CSSTransition放入到一个TransitionGroup中来完成动画：

// TransactionGroupDemo.js
import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import { CSSTransition, TransitionGroup } from 'react-transition-group'
import './TransitionGroup.css'
class TransactionGroupDemo extends PureComponent {
    static propTypes = {}
    constructor(props) {
        super(props)
        this.state = {
            names: ["codewhy", "kobe", "lilei"]
        }
    }
    render() {
        return (
            <TransitionGroup>
                {
                    this.state.names.map((item, index) => {
                        return (
                            <CSSTransition key={item}
                                timeout={500}
                                classNames="item">
                                <div>{item}<button onClick={e => this.removeItem(index)}>-1</button></div>

                            </CSSTransition>
                        )
                    })
                }
                <button onClick={e => this.addName()}>+names</button>
            </TransitionGroup>
        )
    }
    addName() {
        this.setState({
            names: [...this.state.names, "aaa" + this.state.names.length]
        })
    }
    removeItem(index) {
        this.setState({
            names: this.state.names.filter((item, indey) => {
                return index !== indey;
            })
        })
    }
}
export default TransactionGroupDemo

css样式

.item-enter {
    opacity: 1;
    transform: scale(0);
}

.item-enter-active {
    opacity: 0;
    transform: scale(1);
    transition: opacity 300ms, transform 300ms;
}

.item-enter-done {
    color: red;
}

.item-exit {
    opacity: 0;
    transform: scale(1);
}

.item-exit-active {
    opacity: 0;
    transform: scale(0);
    transition: opacity 300ms, transform 300ms;
}

.item-exit-done {
    opacity: 0;
}