安装
npm install react-transition-group
该组件提供了4个组件Transition、CSSTransition、SwitchTransition、TransitionGroup
写法跟Vue ---- transition
组件很像
这里主要介绍CSSTransition
import React, { useState } from 'react';
import { CSSTransition } from 'react-transition-group'
import "./style.less"
const Transition = () => {
const [show, setShow] = useState(true)
return (
<div className="Transition">
<button onClick={() => setShow(!show)}>
当前状态:{show ? '显示' : '隐藏'}</button>
<CSSTransition
in={show}
classNames="fade"
timeout={1000}
unmountOnExit={true}
appear
onEnter={el => console.log('开始进入', el)}
onEntering={el => console.log('正在进入')}
onEntered={el => console.log('进入完成')}
onExit={el => console.log('开始退出')}
onExiting={el => console.log('正在退出')}
onExited={el => console.log('退出完成')}
>
<div>hello</div>
</CSSTransition>
</div>
);
}
export default Transition;
.Transition {
.fade-enter {
opacity: 0;
}
.fade-exit {
opacity: 1;
}
.fade-enter-active {
opacity: 1;
transition: all 0.3s;
}
.fade-exit-active {
opacity: 0;
transition: all 0.3s
}
}