react借助react-transiton-group实现类似vue transition复杂动画

借助react-transiton-group可以实现类似vue动画钩子的效果

安装：yarn add react-transition-group

引入组件和外部的less

import React, { Fragment } from 'react'
import { Button } from 'antd'
import { CSSTransition,TransitionGroup } from 'react-transition-group'
import './xx.less'

编写内容代码

class Admin extends React.Component {
  state = {
    show: true,
  }

  targetInput = () => {
    this.setState({
      show: !this.state.show,
    })
  }

  render() {
    return (
      <Fragment>
        <CSSTransition
          in={this.state.show}
          timeout={1000}
          classNames='fade'
          unmountOnExit
          appear={true}
          onEntered={el => {
			/*这里是钩子函数
			onEnter:入场动画第一时刻的时候触发
			onEntering: 入场动画第二时刻的时候触发
			onEntered：入场动画结束了触发
			onExit:出场的第一个时刻触发
			onExiting: 出场的第二个时刻触发
			onExited：出场结束触发
			*/
            console.log(el)
          }}
         >
         
         <div>
            <span>动画作用的位置，CSSTransition里面的第一层需要是一个标签（现在是div）</span>
            <span>如果是多个就报错了</span>
         </div>
         
        </CSSTransition>
        <Button type='primary' onClick={this.targetInput}>
          点击切换
        </Button>
      </Fragment>
    )
  }
}

export default Admin

编写less

/* 刚开始的样式 */
.fade-enter,
.fade-appear {
  opacity: 1;
  color: #999;
}
/* 入场执行的样式 */
.fade-enter-active,
.fade-appear-active {
  width: 1000px;
  color: #00c1de;
  transition: all 1s;
}
/* 入场结束的样式 */
.fade-enter-down {
  width: 600px;
  color: #333;
}
/* 出场的样式 */
.fade-exit {
  position: relative;
  top: 0px;
}
/* 出场进行中的的样式 */
.fade-exit-active {
  top: 20px;
}
/* 出场结束的样式 */
.fade-exit-down {
  top: 0px;
}

CSSTransition的代码解释（可以去官网看）

• in 表示控制元素出现和消失的变量（监听）
• timeout 表示执行的时间
• classNames （最后是s）用于区分less中的class头，界面有多个地方用到CSSTransition就用不同的名称，现在用的是fade
• unmountOnExit 这个可以让dom元素直接在结构中去除和出现
• appear 一开始出现的时候就展示动画，对应less中的 .fade-appear 和 .fade-appear-active
• onEntered 钩子函数（可以实现js操作）

操作多个使用ransitionGroup

ransitionGroup进行包裹，只有 in去除了，其它都一样的

<ransitionGroup>
{
	数组map遍历（element,index）=>{
		return (
		<CSSTransition
          timeout={1000}
          classNames='fade'
          unmountOnExit
          appear={true}>
          key={index}
          onEntered={(e)=>{}}
          <div >
          		这里是内容
          </div>
        </CSSTransition>
		)
	}
}
</ransitionGroup>