在最近的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中动画的深入信息,我建议阅读官方文档 。
在过去的两年中,React越来越受欢迎。 实际上,我们在市场上有许多商品可供购买,审查,实施等。 如果您正在寻找有关React的其他资源,请随时检查 。
请在下面的评论中告诉我们您的想法。 请查看我的Envato Tuts +讲师页面,以获取有关React和相关Web技术的更多教程。
翻译自: https://code.tutsplus.com/tutorials/introduction-to-animations-in-reactjs--cms-28083