React动画简介

最新推荐文章于 2024-03-08 09:43:28 发布

cunjie3951

最新推荐文章于 2024-03-08 09:43:28 发布

阅读量175

点赞数

文章标签： vue react python js java ViewUI

在最近的React教程中，您熟悉了基本的React概念，例如JSX ， routing和form 。在本教程中，我们将把它带入一个新的水平，并尝试理解React中的动画。

入门

创建一个名为ReactAnimations的目录。导航到该目录，然后使用Node Package Manager或npm启动项目。

mkdir ReactAnimations
cd ReactAnimations
npm init

为项目安装react和react-dom 。

npm install react react-dom  --save

我们将为此项目使用webpack模块捆绑器。安装webpack和webpack开发服务器。

npm install webpack webpack-dev-server --save-dev

安装babel包，以在我们的项目中将JSX语法转换为JavaScript。

npm install --save-dev babel-core babel-loader babel-preset-react babel-preset-es2015

创建webpack-dev-server所需的配置文件，在其中定义入口文件，输出文件和babel加载器。这是webpack.config.js外观：

module.exports = {
    entry: './app.js',
    module: {
        loaders: [
            {
                exclude: /node_modules/,
                loader: 'babel-loader?presets[]=es2015&presets[]=react'
            }
        ]
    },
    output: {
        filename: 'bundle.js'
    }
};

创建一个index.html文件，将在其中渲染应用程序。外观如下：

<html>
    <head>
        <title>TutsPlus - React Animations</title>
    </head>
    <body>
        <div id="app"></div>
        <script src="bundle.js"></script>
    </body>
</html>

创建一个名为app.js的文件。在app.js内部，导入所需的react库，如下所示：

import React from 'react';
import {render} from 'react-dom';

创建一个称为Home的无状态组件，该组件呈现H1标签。

const Home = () => {
    return (
        <h2>{'TutsPlus - Welcome to React Animations!'}</h2>
    );
};

在index.html页面的app元素内渲染Home组件。这是app.js外观：

import React from 'react';
import {render} from 'react-dom';
 
const Home = () => {
    return (
        <h2>{'TutsPlus - Welcome to React Animations'}</h2>
    );
};
 
render(
    <Home />,
    document.getElementById('app')
);

保存以上更改并启动webpack服务器。您应该在http：// localhost：8080 / index.html上运行您的应用程序。

React中的动画

React提供了许多用于创建React应用程序的附加实用程序。 TransitionGroup和CSSTransitionGroup是为动画提供的API。

根据官方文件，

ReactTransitionGroup附加组件是用于动画的低级API， ReactCSSTransitionGroup是用于轻松实现基本CSS动画和过渡的附加组件。

出现动画

让我们从在React中尝试一个简单的动画开始。将react-addons-css-transition-group到项目中。

npm install react-addons-css-transition-group --save

在app.js文件中导入ReactCSSTransitionGroup 。

import ReactCSSTransitionGroup from 'react-addons-css-transition-group'

在您创建的Home组件内，将h2标签包装在ReactCSSTransitionGroup标签内。

<div>
    <ReactCSSTransitionGroup transitionName="anim" transitionAppear={true} transitionAppearTimeout={5000} transitionEnter={false} transitionLeave={false}>
        <h2>{'TutsPlus - Welcome to React Animations'}</h2>
    </ReactCSSTransitionGroup>
</div>

使用ReactCSSTransitionGroup标签，您已经定义了进行动画的部分。您已经使用transitionName为过渡指定了名称。您还定义了是否出现过渡，进入和离开过渡。

使用在ReactCSSTransitionGroup内部定义的过渡名称，您将定义CSS类，这些类将在出现时以及处于活动状态时执行。将以下CSS样式添加到index.html页面。

.anim-appear {
  opacity: 0.01;
}

.anim-appear.anim-appear-active{
  opacity: 2;
  transition: opacity 5s ease-in;
}

就像您已经注意到的那样，您需要在render方法和CSS中都指定动画持续时间。因为那是React知道何时从元素中删除动画类以及何时从DOM中删除元素的方式。

保存以上更改并刷新页面。页面加载后，几秒钟之内您应该就能看到动画文本。

输入/离开动画

为了更好地了解进入和离开动画，我们将创建一个小的React应用程序。该应用程序将具有一个输入文本框，用于输入名称。您将看到在将名称添加到列表后如何添加回车动画。

在app.js ，创建一个名为App的新类。

class App extends React.Component {
  
}

在组件的初始状态内初始化data列表和name变量。

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      name:''
    };
  }
}

在App组件的渲染部分内，放置一个用于输入名称的输入文本框和一个将名称添加到数组列表的按钮。

<div>
    Enter Name <input onChange={this.handleChange} type="text" /> <input onClick={this.add} type="button" value="Add" />
</div>

在App组件内定义输入handleChange事件和add事件。

handleChange(e){
    this.setState({name:e.target.value})
}

handleChange事件将输入文本框的值设置为name变量。这是add方法的外观：

add(){
    var arr = this.state.data.slice();
    arr.push({'id':(new Date()).getTime(),'name':this.state.name})
    this.setState({data:arr})
}

在add方法内部，将输入的名称和唯一ID推送到data数组列表。

将handleChange和add方法绑定到App组件的构造函数中。

constructor(props) {
    super(props);
    this.add = this.add.bind(this);
    this.handleChange = this.handleChange.bind(this);
    this.state = {
      data: [],
      name:''
    };
}

您将在列表中显示输入的名称。修改呈现HTML代码以添加列表。

<ul>
{
    this.state.data.map(function(player) {
         return <li key={player.id}>{player.name}</li>
    })
}
</ul>

为了给新添加的项目设置动画，我们将在li元素上添加ReactCSSTransitionGroup标签。

<ul>
    <ReactCSSTransitionGroup transitionName="anim" transitionAppear={false} transitionEnterTimeout={5000} transitionEnter={true} transitionLeave={false}>
    {
      this.state.data.map(function(player) {
         return <li key={player.id}>{player.name}</li>
      })
    }
    </ReactCSSTransitionGroup>
</ul>

将以下CSS过渡样式添加到index.html页面。

.anim-enter {
  opacity: 0.01;
}

.anim-enter.anim-enter-active {
  opacity: 2;
  transition: opacity 5s ease-in;
}

这是完整的App组件：

class App extends React.Component {
  constructor(props) {
    super(props);
    this.add = this.add.bind(this);
    this.handleChange = this.handleChange.bind(this);
    this.state = {
      data: [],
      name:''
    };
  }
  add(){
    var arr = this.state.data.slice();
    arr.push({'id':(new Date()).getTime(),'name':this.state.name})
    this.setState({data:arr})
  }
  handleChange(e){
    this.setState({name:e.target.value})
  }
  render() {
    return (
      <div>
        Enter Name <input onChange={this.handleChange} type="text" /> <input onClick={this.add} type="button" value="Add" />
        
        <ul>
        <ReactCSSTransitionGroup transitionName="anim" transitionAppear={false} transitionEnterTimeout={3000} transitionEnter={true} transitionLeave={false}>
        {
          this.state.data.map(function(player) {
             return <li key={player.id}>{player.name}</li>
          })
        }
        </ReactCSSTransitionGroup>
        </ul>
        
      </div>
    )
  }
}

保存以上内容并刷新页面。输入名称并输入添加按钮，该项目应随动画一起添加到列表中。

同样，请假动画也可以在上面的代码中实现。在应用程序中实现了删除功能后，将leave和leave-active类添加到index.html 。在render方法的ReactCSSTransitionGroup标记中将transitionLeave设置为True ，您应该会做得很好。

包起来

在本教程中，您了解了如何在React中开始使用动画。您创建了一个简单的React应用程序，并看到了如何实现外观并输入动画。有关React中动画的深入信息，我建议阅读官方文档。

本教程的源代码可在GitHub上找到。

在过去的两年中，React越来越受欢迎。实际上，我们在市场上有许多商品可供购买，审查，实施等。如果您正在寻找有关React的其他资源，请随时检查。

请在下面的评论中告诉我们您的想法。请查看我的Envato Tuts +讲师页面，以获取有关React和相关Web技术的更多教程。

翻译自: https://code.tutsplus.com/tutorials/introduction-to-animations-in-reactjs--cms-28083

cunjie3951

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
React动画简介

在最近的React教程中，您熟悉了基本的React概念，例如JSX ， routing和form 。在本教程中，我们将把它带入一个新的水平，并尝试理解React中的动画。入门创建一个名为ReactAnimations的目录。导航到该目录，然后使用Node Package Manager或npm启动项目。 mkdir ReactAnimationscd ReactAnimatio...
复制链接

扫一扫