React 学习 --- 过渡动画在开发中，我们想要给一个组件的显示和消失添加某种过渡动画，可以很好的增加用户体验.为此

这是我参与11月更文挑战的第17天，活动详情查看：2021最后一次更文挑战

在开发中，我们想要给一个组件的显示和消失添加某种过渡动画，可以很好的增加用户体验

为此React社区为我们提供了react-transition-group用来完成过渡动画

这个库可以帮助我们方便的实现组件的入场和离场动画，使用时需要进行额外的安装

react-transition-group本身非常小，不会为我们应用程序增加过多的负担。

react-transition-group会在合适的时间添加或移除对应的样式，从而实现我们所需要的动画效果

# 安装
$ yarn add react-transition-group

react-transition-group主要包含四个组件:

Transition

该组件是一个和平台无关的组件(不一定要结合CSS
一般不会主动使用，但该组件是react-transition-group提供的其它组件的父类

CSSTransition

结合CSS来完成过渡动画效果
是开发中最常用的组件

SwitchTransition

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

TransitionGroup

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

CSSTransition

CSSTransition是基于Transition组件构建的

CSSTransition执行过程中，有三个状态:appear、enter、exit

它们有三种状态，需要定义对应的CSS样式

第一类，开始状态:对于的类是-appear、-enter、exit
第二类:执行动画:对应的类是-appear-active、-enter-active、-exit-active
第三类:执行结束:对应的类是-appear-done、-enter-done、-exit-done

import React, { PureComponent } from 'react'
import { CSSTransition } from 'react-transition-group'

import './index.css'

export class index extends PureComponent {
  constructor(props) {
    super(props)

    this.state = {
      isShow: true
    }
  }

  render() {
    const  { isShow } = this.state

    return (
      <div>
        <button onClick={ () => this.setState({ isShow: !isShow }) }>change</button>

        {/*
          in 值为boolean值，如果是true，显示包裹的组件，false的时候，隐藏包裹的组件
             --- in主要是进行元素的显示和隐藏之间切换时候使用的属性
          timeout 动画对应样式添加时间 单位为毫秒 类型需要为number
          	--- 动画的执行时间 是由css样式决定的
          	--- 这里的timeout所决定的是css样式添加的时间，unmountOnExit和对应的生命周期回调的执行时间
          	--- 在绝大多数的情况下，css的动画执行时间和timeout的时间是一致的
          classNames 动画的基础样式名
          unmountOnExit 是否在exit-done执行完毕后 移除对于的组件，true表示移除 默认为false
          appear 是否添加apper样式，也就是包裹元素首次进入界面时候 是否执行对应的动画 默认值为false
        */}
        <CSSTransition
          in={ isShow }
          timeout={300}
          appear
          classNames="fade"
          unmountOnExit={true}
        >
         <div className="box">
           App
         </div>
        </CSSTransition>
      </div>
    )
  }
}

export default index

/* 容器样式 */
.box {
  width: 300px;
  height: 300px;
  background-color: blue;
  text-align: center;
  line-height: 300px;
  color: #fff;
  font-size: 50px;
}

/* 动画样式 */
.fade-enter,
.fade-appear {
  opacity: 0;
  transform: scale(0.8);
}

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

/* 以下是执行完动画后，元素的默认样式，所以可以省略 */
/* 
	.fade-enter-done,
  .fade-appear-done {
  	opacity: 1;
  	transform: scale(1);
	} 
*/

/* 默认样式 --- 这里省略 */
/* 
 .fade-exit {
   opacity: 1;
   transform: scale(1);
  } 
*/

.fade-exit-active {
  opacity: 0;
  transform: scale(0.8);
  transition: all 300ms
}

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

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

{/*
  CSSTransition生命周期钩子都有一个参数，即CSSTransition组件包裹的那个DOM元素
  所以CSSTransition的子组件有且只能有一个
*/}
<CSSTransition
  in={ isShow }
  timeout={300}
  appear
  classNames="fade"
  unmountOnExit={true}
  onEnter={el => console.log('准备进入')}
  onEntering={el => console.log('进入中')}
  onEntered={el => console.log('进入完成')}
  onExit={el => console.log('准备离开')}
  onExiting={el => console.log('离开中')}
  onExited={el => console.log('离开完成')}
  >
  <div className="box">
    App
  </div>
</CSSTransition>

SwitchTransition

SwitchTransition可以完成两个组件之间切换的炫酷动画:

比如我们有一个按钮需要在on和off之间切换，我们希望看到on先从左侧退出，off再从右侧进入
这个动画在vue中被称之为 vue transition modes
react-transition-group中使用SwitchTransition来实现该动画

import React, { PureComponent } from 'react'
import { SwitchTransition, CSSTransition } from 'react-transition-group'

import './index.css'

export class index extends PureComponent {
  constructor(props) {
    super(props)

    this.state = {
      isShow: true
    }
  }

  render() {
    const  { isShow } = this.state

    return (
      <div>
        <button onClick={ () => this.setState({ isShow: !isShow }) }>change</button>

       {/*
         SwitchTransition上有一个属性值mode
         mode的默认值为out-in 可选值为 out-in | in-out
       */}
       <SwitchTransition>
         {/*
          因为并不是希望CSSTransition组件卸载或渲染
          而是希望内部内容进行更新并产生对应的动效，所以这里使用key属性来替换in属性
         */}
          <CSSTransition
            key={ isShow ? 'on' : 'off' }
            timeout={300}
            appear
            classNames="switch"
          >
          <div className="box">
            { isShow ? 'on' : 'off' }
          </div>
          </CSSTransition>
        </SwitchTransition>
      </div>
    )
  }
}

export default index

TransitionGroup

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

import { PureComponent } from 'react'
import { TransitionGroup, CSSTransition } from 'react-transition-group'
import './index.css'

export default class App extends PureComponent {
  constructor() {
    super()

    this.state = {
      users: ['Klaus', 'Alex', 'Steven']
    }
  }

  render() {
    return (
      <>
       <TransitionGroup>
          {
            this.state.users.map((user, index) => (
              // 这里在CSSTransition上添加key属性
              // 是因为此时CSSTransition位于循环中
              <CSSTransition
                timeout={300}
                classNames="list"
                key={ index }
              >
                <div>{ user }</div>
              </CSSTransition>
            ))
          }
       </TransitionGroup>

       <button onClick={() => {
         this.setState({
           users: [...this.state.users, 'coderwxf']
         })
       }}>
        add user
        </button>
      </>
    )
  }
}

.list-enter {
  opacity: 0;
}

.list-enter-active {
  opacity: 1;
  transition: all 300ms;
}

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