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>

你可能感兴趣的:(React)