1.安装
yarn add react-transition-group
2.使用CSSTransition组件
import React, {
PureComponent } from 'react';
import {
CSSTransition } from 'react-transition-group';
import './CSSTransition.css'; // 导入css文件
export default class App extends PureComponent {
constructor(props) {
super(props);
this.state = {
isShow: true, // 用来标识是否显示
};
}
render() {
return (
<div>
<button
onClick={
(e) => this.setState({
isShow: !this.state.isShow })}
className='btn'
>
显示/隐藏
</button>
<CSSTransition
in={
this.state.isShow} {
/* true为显示，false标识隐藏 */}
classNames='box' {
/* 类名的开头，如：box-enter、box-enter-active等等*/}
appear={
true} {
/* 表示开启在页面一开始的时候的动画效果*/}
timeout={
3000} {
/* 类名切换的延迟，如：box-enter-active → box-enter-done。一般与动画过渡的时间一致*/}
unmountOnExit={
true} {
/*退出的时候，是否卸载这个dom*/}
{
/* 生命钩子函数 */}
onEnter={
(e) => console.log('准备进入')}
onEntering={
(e) => console.log('正在进入')}
onEntered={
(e) => console.log('进入完成')}
onExit={
(e) => console.log('准备退出')}
onExiting={
(e) => console.log('正在退出')}
onExited={
(e) => console.log('退出完成')}
>
<div
style={
{
width: '100px', height: '100px', backgroundColor: 'red' }}
></div>
</CSSTransition>
</div>
);
}
}
css：
.box-enter,
.box-appear {
opacity: 0;
}
.box-enter-active,
.box-appear-active {
opacity: 1;
transition: opacity 3000ms;
}
.box-exit {
opacity: 1;
}
.box-exit-active {
opacity: 0;
transition: opacity 3000ms;
}
.box-exit-done {
opacity: 0;
}
.btn {
background-color: green;
}
效果：
3.SwitchTransition组件的使用
import React, {
PureComponent } from 'react';
import {
SwitchTransition, CSSTransition } from 'react-transition-group';
import './SwitchTransition.css';
export default class App extends PureComponent {
constructor(props) {
super(props);
this.state = {
isOn: true,
};
}
render() {
return (
<div style={
{
textAlign: 'center', padding: '50px' }}>
<SwitchTransition mode='out-in'>
<CSSTransition
classNames='btn'
timeout={
1000}
key={
this.state.isOn ? 'on' : 'off'} // 由于我要进行切换效果，所以得绑定key，不需要in
>
<button onClick={
(e) => this.setState({
isOn: !this.state.isOn })}>
{
this.state.isOn ? 'on' : 'off'}
</button>
</CSSTransition>
</SwitchTransition>
</div>
);
}
}
css
.btn-enter {
opacity: 0;
transform: translateX(100%);
}
.btn-enter-active {
transform: translateX(0);
opacity: 1;
transition: all 1s;
}
.btn-exit {
transform: translateX(0);
opacity: 1;
}
.btn-exit-active {
transform: translateX(-100%);
opacity: 0;
transition: all 1s;
}
效果：
4.TransitionGroup组件的使用
注：TransitionGroup标签的第一层包含的只有CSSTransition这个组件，包含其他的标签的话，控制台会报错！
import React, {
PureComponent } from 'react';
import {
TransitionGroup, CSSTransition } from 'react-transition-group';
import './TransitionGroup.css';
export default class App extends PureComponent {
constructor(props) {
super(props);
this.state = {
list: ['zs', 'lisi', 'wangwu'],
};
}
render() {
return (
<div>
<TransitionGroup>
{
this.state.list.map((item) => {
return (
<CSSTransition key={
item} classNames='list' timeout={
1000}>
<li>{
item}</li>
</CSSTransition>
);
})}
</TransitionGroup>
<button onClick={
(e) => this.add()}>添加</button>
</div>
);
}
add() {
const list = [...this.state.list];
console.log(list);
list.push('wjg' + list.length);
this.setState({
list,
});
}
}
css
.list-enter {
opacity: 0;
}
.list-enter-active {
opacity: 1;
transition: all 1s;
}
.list-enter-done {
color: red;
}
本文分享 CSDN - 冬天爱吃冰淇淋。
如有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一起分享。
