个性化阅读
专注于IT技术分析

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中删除元素。

赞(0)
未经允许不得转载:srcmini » React使用动画组件 – ReactJS实战教程

评论 抢沙发

评论前必须登录!