React-组件-CSSTransition
动画组件
Transition
- 该组件是一个和平台无关的组件（不一定要结合 CSS）；
- 在前端开发中，我们一般是结合 CSS 来完成样式，所以比较常用的是 CSSTransition；
CSSTransition
- 在前端开发中，通常使用 CSSTransition 来完成过渡动画效果；
SwitchTransition
- 两个组件显示和隐藏切换时，使用该组件
TransitionGroup
- 将多个动画组件包裹在其中，一般用于列表中元素的动画；
首先来看 CSSTransition，从 CSSTransition 状态开始介绍，CSSTransition 有三个状态：
- appear: 初始
- enter：进入
- exit：退出
当组件 第一次加载，当组件 显示，当组件 退出，的时候会自动查找如下类名：
- -appear
- -appear-active
- -appear-done
通过 CSSTransition 来实现过渡效果
安装 react-transition-group
npm install react-transition-group --save
从安装好的库中导入 CSSTransition
import {CSSTransition} from 'react-transition-group';
- 利用 CSSTransition 将需要执行过渡效果的组件或元素包裹起来
- 编写对应的 CSS 动画，实现:
.-enter/.-enter-active/.-enter-done
给 CSSTransition 添加一些属性：
- in 属性：取值是一个布尔值, 如果取值为 false 表示触发退出动画, 如果取值是 true 表示触发进入动画
- classNames 属性：指定动画类名的前缀
- timeout 属性：设置动画超时时间
App.js:
import React from 'react';
import './App.css'
import {CSSTransition} from 'react-transition-group';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
isShow: false
}
}
render() {
return (
<div>
<CSSTransition in={this.state.isShow}
classNames={'box'}
timeout={3000}>
<div/>
</CSSTransition>
<button onClick={() => {
this.btnClick()
}}>显示
</button>
</div>
);
}
btnClick() {
this.setState({
isShow: true
})
}
}
export default App;
App.css:
.box-enter {
/*
进入动画执行之前绑定的类名
*/
width: 0;
height: 0;
opacity: 0;
background: skyblue;
}
.box-enter-active {
/*
进入动画执行过程中绑定的类名
*/
width: 100px;
height: 100px;
opacity: 1;
transition: all 3s;
}
.box-enter-done {
/*
进入动画执行完毕之后绑定的类名
*/
width: 100px;
height: 100px;
opacity: 1;
background: red;
}
退出状态的类名的情况, 修改 App.css 添加如下类名样式：
.box-exit {
/*
退出动画执行之前绑定的类名
*/
width: 100px;
height: 100px;
opacity: 1;
background: red;
}
.box-exit-active {
/*
退出动画执行过程中绑定的类名
*/
width: 0;
height: 0;
opacity: 0;
transition: all 3s;
}
.box-exit-done {
/*
退出动画执行完毕之后绑定的类名
*/
width: 0;
height: 0;
opacity: 0;
background: skyblue;
}
App.js:
import React from 'react';
import './App.css'
import {CSSTransition} from 'react-transition-group';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
isShow: false
}
}
render() {
return (
<div>
<CSSTransition in={this.state.isShow}
classNames={'box'}
timeout={3000}>
<div/>
</CSSTransition>
<button onClick={() => {
this.setState({
isShow: true
})
}}>显示
</button>
<button onClick={() => {
this.setState({
isShow: false
})
}}>隐藏
</button>
</div>
);
}
}
export default App;
如上的退出状态结束之后元素并没有删除，只是进行了隐藏，如果想，在退出状态结束之后将元素进行删除的话需要借助一个 unmountOnExit 进行实现。
- unmountOnExit：如果取值为 true, 那么表示退出动画执行完毕之后删除对应的元素
第一次加载时的状态，就是在页面刚加载的时候触发的，修改 App.css 添加第一次加载的类名：
.box-appear {
/*
初始化动画执行之前绑定的类名
*/
width: 0;
height: 0;
opacity: 0;
background: skyblue;
}
.box-appear-active {
/*
初始化动画执行过程中绑定的类名
*/
width: 100px;
height: 100px;
opacity: 1;
transition: all 3s;
}
.box-appear-done {
/*
初始化动画执行完毕之后绑定的类名
*/
width: 100px;
height: 100px;
opacity: 1;
background: red;
}
修改 App.js 给 CSSTransition 添加 appear 属性：
import React from 'react';
import './App.css'
import {CSSTransition} from 'react-transition-group';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
isShow: true
}
}
render() {
return (
<div>
<CSSTransition in={this.state.isShow}
classNames={'box'}
timeout={3000}
unmountOnExit={true}
appear
>
<div/>
</CSSTransition>
<button onClick={() => {
this.setState({
isShow: true
})
}}>显示
</button>
<button onClick={() => {
this.setState({
isShow: false
})
}}>隐藏
</button>
</div>
);
}
}
export default App;
