2021-03-21

React学习笔记

使用react-transition-group实现动画

• Transition
• CSSTransition
• TransitionGroup

CSSTransition

import { CSSTransition } from 'react-transition-group';

<!--App.js-->
<CSSTransition
	in={this.state.show}//in获取当前动画状态
	timeout={300}//动画执行时间
	className='fade'
	unmountOnExit
	onEntered={(el) => {el.style.color='blue}}
	appear={true}
>
	<div>hello</div>
</CSSTransition>

有了in、timeout两个参数后，就会自动向div挂载类名，从而进行样式渲染,unmountOnExit会使

这个DOM消失或出现,appear={true}指的是div里的内容第一次出现时也有动画，在CSS文件中要相应添加.fade-appear.fade-appear-active

<!-- style.css-->
//刚要入场之前
.fade-enter, .fade-appear{
	opacity: 0
}
//入场之前的第2个时刻，入场动画结束之前一直存在
.fade-enter-active, .fade-appear-active{
	opacity: 1;
	transition: opacity 1s ease-in;
}
//整个入场动画执行完成之后，存在
.fade-enter-done{
	opacity: 1;
}
//出厂动画出现的第一个时刻
.fade-exit{
	opacity: 1;
}
//出场动画执行的过程中
.fade-exit-active{
	opacity: 0;
	transition: opacity 1s ease-in;
}
//出厂动画执行完成后
.fade-exit-done{
	opacity: 0;
}