React 动画
动画是一种将图像处理为运动图像的技术。它是制作交互式Web应用程序最常用的技术之一。在React中，我们可以使用称为React过渡组的显式组件组添加动画。
React过渡组是用于管理组件状态的附加组件，对于定义输入和退出过渡。它本身不能对样式进行动画处理。相反，它公开了过渡状态，管理类和组元素，并以有用的方式操纵DOM。
React Transition组主要有两个API 用于创建过渡。这些是:
ReactTransitionGroup: : 它用作动画的低级API。
ReactCSSTransitionGroup: : 它用作实现基本CSS过渡和动画的高级API。
安装
我们需要安装 react-transition-group 以便在React Web应用程序中创建动画。您可以使用以下命令。
$ npm install react-transition-group--save
React过渡组组件
React过渡组API提供了三个主要组件。这些是:
过渡
CSSTransition
过渡小组
转换
它具有一个简单的组件API，用于描述从一个组件状态到另一个组件状态随时间的转变。它主要用于为组件的安装和卸载设置动画。它也可以用于就地转换状态。
我们可以将Transition组件访问为四种状态:
进入
输入
退出
退出
CSSTransition
CSSTransition组件使用CSS样式表类来编写过渡并创建动画。它受到 ng-animate 库的启发。它也可以继承过渡组件的所有Props。我们可以将" CSSTransition"划分为三个状态。这些是:
出现
输入
退出
CSSTransition组件必须以一对类名的形式应用于子组件。第一类为 name-stage 形式，第二类为 name-stage-active 。例如，您提供淡入淡出的名称，并将其应用于" enter"阶段，这两个类将为 fade-enter 和 fade-enter-active 。
TransitionGroup
此组件用于管理一组过渡组件("过渡"和" CSSTransition)。这是一台状态机，可随时间控制组件的安装和卸载。过渡组件不会直接定义任何动画。在此，"列表"项的动画设置方式基于各个过渡组件。这意味着" 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: ['Blockchain', 'ReactJS', 'TypeScript', 'lidihuo']};
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中删除元素。
输出
何时我们执行上面的程序，它给出下面的输出。
单击'插入项目"按钮，将显示以下屏幕。
插入项目并按确定后，新项目可以淡入样式添加到列表中。在这里，我们还可以通过单击特定链接从列表中删除任何项目。
