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 (
			
				 {el.style.color = 'blue'}}
					appear={true}
				>
					
hello
) } 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、实现效果如下所示

react-transition-group中CSSTransition的基础用法_第1张图片

你可能感兴趣的:(React,css,CSSTransition,React动画)