借助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>