动画组件

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, 那么表示退出动画执行完毕之后删除对应的元素

React-组件-CSSTransition_React

第一次加载时的状态,就是在页面刚加载的时候触发的,修改 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;