React使用动画组件 – ReactJS实战教程 react动画组件|React

【React使用动画组件 – ReactJS实战教程】上一章ReactJS实战教程请查看：React使用CSS样式化组件的4种方式
动画是一种将图像处理为移动图像的技术，它是制作交互式web应用程序最常用的技术之一，在React中，我们可以使用一组称为React Transition group的显式组件添加动画。
React Transition Group是一个用于管理组件状态的附加组件，对于定义进入和退出转换非常有用。它不能自己动画样式，相反，它公开转换状态，管理类和组元素，并以有用的方式操作DOM，它使得可视化转换的实现更加容易。
React Transition Group主要有两个api来创建转换:

ReactTransitionGroup: 它用作动画的底层API。
ReactCSSTransitionGroup: 它用作实现基本CSS转换和动画的高级API。

安装React Transition Group我们需要安装react-transition-group来在React Web应用程序中创建动画，你可以使用下面的命令。

$ npm install react-transition-group --save

React Transition Group组件React Transition Group API提供了三个主要组件:

Transition
CSSTransition
Transition Group

Transition
它有一个简单的组件API来描述从一个组件状态到另一个组件状态的转换，它主要用于动画组件的安装和卸载，它也可以用于就地过渡状态。
我们可以将转换组件访问成四种状态:

entering进入
entered已进入
exiting退出
exited已退出

CSSTransition
CSSTransition组件使用CSS样式表类来编写转换和创建动画，它的灵感来自ng-animate库。它还可以继承转换组件的所有支持，我们可以把CSSTransition分为三种状态。这些都是:

appear出现
enter进入
exit退出

CSSTransition组件必须以一对类名的形式应用于子组件。第一个类的形式是name-stage，第二个类的形式是name-stage-active。例如，你提供了名称fade，当它应用于“enter”阶段时，这两个类将是fade-enter和fade-enter -active。它也可以接受一个props作为超时，这定义了动画的最大时间。
TransitionGroup
此组件用于管理列表中的一组转换组件(转换和CSSTransition)。它是一个状态机，随着时间的推移控制组件的安装和卸载。转换组件不直接定义任何动画。在这里，“list”项的动画是基于单个转换组件的。这意味着，“TransitionGroup”组件可以在一个组件中有不同的动画。
让我们看看下面的例子，它显然有助于理解React动画。
例子
App.js
在App.js文件中，导入react-transition-group组件，并创建CSSTransition组件，该组件用作要动画的组件的包装。我们将使用transitionEnterTimeout和transitionLeaveTimeout来进行CSS转换。当我们要从列表中插入或删除元素时使用的Enter和Leave动画。

import React, { Component } from 'react'; import { CSSTransitionGroup } from 'react-transition-group'; class App extends React.Component { constructor(props) { super(props); this.state = {items: ['Java', 'ReactJS', 'TypeScript', 'C++']}; this.handleAdd = this.handleAdd.bind(this); }handleAdd() { const newItems = this.state.items.concat([ prompt('Enter Item Name') ]); this.setState({items: newItems}); }handleRemove(i) { let newItems = this.state.items.slice(); newItems.splice(i, 1); this.setState({items: newItems}); }render() { const items = this.state.items.map((item, i) => ( < div key={item} onClick={() => this.handleRemove(i)}> {item} < /div> )); return ( < div> < h1>Animation Example< /h1> < button onClick={this.handleAdd}>Insert Item< /button> < CSSTransitionGroup transitionName="example" transitionEnterTimeout={800} transitionLeaveTimeout={600}> {items} < /CSSTransitionGroup> < /div> ); } } export default App;

Main.js

import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.js'; ReactDOM.render(< App />, document.getElementById('app'));

style.css
在应用程序中添加style.css文件，并添加以下CSS样式。现在，要使用这个CSS文件，你需要在HTML文件中添加这个文件的链接。

.example-enter { opacity: 0.01; }.example-enter.example-enter-active { opacity: 1; transition: opacity 500ms ease-in; }.example-leave { opacity: 1; }.example-leave.example-leave-active { opacity: 0.01; transition: opacity 300ms ease-in; }

在上面的例子中，在CSS和render方法中都指定了动画持续时间。它告诉React组件何时从列表中删除动画类，何时从DOM中删除元素。