react-transition-group中CSSTransition的基础用法

1、加载react-transition-group

yarn add react-transition-group

或

npm install react-transition-group --save

2、在react组件中引入

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

3、编写简单的React组件代码

import React, { Component, Fragment } from 'react'
import { CSSTransition } from 'react-transition-group'
import './style.css'

class App extends Component {

	constructor(props) {
		super(props)
		this.state = {
			show: true
		}
		this.handleToggole = this.handleToggole.bind(this)
	}

	render() {
		return (
			<Fragment>
				<CSSTransition
					in={ this.state.show }
					timeout={ 1000 }
					classNames='fade'
					unmountOnExit
					onEntered={el => {el.style.color = 'blue'}}
					appear={true}
				>
					<div>hello</div>
				</CSSTransition>
				<button onClick={this.handleToggole}>toggole</button>
			</Fragment>
		)
	}

	handleToggole() {
		this.setState({
			show: this.state.show ? false : true
		})
	}
}

export default App

• CSSTransiton 标签包裹的div会被加上相应的动画
• in 为控制动画开启关闭的“开关”，true为开启，false为关闭
• classNames 为对应的样式类名，和下面的css内的名字对应
• timeout 为动画执行时间
• unmountOnExit 当动画效果为隐藏时，该标签会从dom树上移除，类似js操作
• appear 是否第一次加载该组件时启用相应的动画渲染，css文件中有含有appear的均和此标签相关
• onEntered 入场动画结束时触发的钩子
• 还有一些相应的钩子在此未做展示：onEnter(入场动画第一帧时执行)、onEntering(当入场动画执行到第二帧时执行)、onExit(出场动画第一帧时执行)、onExiting(出场动画第二帧时执行)、onExited(整个动画出场结束时执行)

4、编写style.css，上面已经注释相应的解释

/*入场动画开始*/
.fade-enter {
  opacity: 0;
}

/*入场动画过程*/
.fade-enter-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;
}

/*页面第一次加载时的开始状态*/
.fade-appear {
  opacity: 0;
}

/*页面第一次加载时的动画过程*/
.fade-appear-active {
  opacity: 1;
  transition: opacity 1s ease-in;
}

5、实现效果如下所示