В последних двух руководствах по React вы познакомились с основными понятиями React, такими как JSX , маршрутизация и формы . В этом уроке мы перейдем на следующий уровень и попытаемся понять анимацию в React.
Начиная
Создайте каталог с именем ReactAnimations . Перейдите в каталог и запустите проект с помощью Node Package Manager или npm.
|
1
2
3
|
mkdir ReactAnimations
cd ReactAnimations
npm init
|
Установи react и react-dom на проект.
|
1
|
npm install react react-dom —save
|
Мы будем использовать webpack модуль для этого проекта. Установите webpack и сервер разработки webpack пакетов.
|
1
|
npm install webpack webpack-dev-server —save-dev
|
Установите пакет babel для преобразования синтаксиса JSX в JavaScript в нашем проекте.
|
1
|
npm install —save-dev babel-core babel-loader babel-preset-react babel-preset-es2015
|
Создайте файл конфигурации, необходимый для webpack-dev-server где мы определим входной файл, выходной файл и загрузчик babel. Вот как выглядит webpack.config.js :
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
|
module.exports = {
entry: ‘./app.js’,
module: {
loaders: [
{
exclude: /node_modules/,
loader: ‘babel-loader?presets[]=es2015&presets[]=react’
}
]
},
output: {
filename: ‘bundle.js’
}
};
|
Создайте файл index.html котором будет отображаться приложение. Вот как это выглядит:
|
1
2
3
4
5
6
7
8
9
|
<html>
<head>
<title>TutsPlus — React Animations</title>
</head>
<body>
<div id=»app»></div>
<script src=»bundle.js»></script>
</body>
</html>
|
Создайте файл с именем app.js Внутри app.js импортируйте необходимые библиотеки реагирования, как показано ниже:
|
1
2
|
import React from ‘react’;
import {render} from ‘react-dom’;
|
Создайте компонент без сохранения состояния с именем Home который отображает тег H1 .
|
1
2
3
4
5
|
const Home = () => {
return (
<h2>{‘TutsPlus — Welcome to React Animations!’}</h2>
);
};
|
Визуализируйте компонент Home внутри элемента приложения на странице index.html . Вот как выглядит app.js :
|
01
02
03
04
05
06
07
08
09
10
11
12
13
|
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. TransitionGroup и CSSTransitionGroup — это API для анимации.
Из официальной документации,
ReactTransitionGroupкомпонентReactTransitionGroup— это низкоуровневый API для анимации, аReactCSSTransitionGroup— это дополнительный компонент для простой реализации основных CSS-анимаций и переходов.
Появляются анимация
Давайте начнем с простой анимации в React. Установите react-addons-css-transition-group к проекту.
|
1
|
npm install react-addons-css-transition-group —save
|
Импортируйте ReactCSSTransitionGroup в файле app.js
|
1
|
import ReactCSSTransitionGroup from ‘react-addons-css-transition-group’
|
Внутри созданного вами компонента Home оберните тег h2 внутри тега ReactCSSTransitionGroup .
|
1
2
3
4
5
|
<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 .
|
1
2
3
4
5
6
7
8
|
.anim-appear {
opacity: 0.01;
}
.anim-appear.anim-appear-active{
opacity: 2;
transition: opacity 5s ease-in;
}
|
Как вы могли заметить, вам нужно указать продолжительность анимации как в методе рендеринга, так и в CSS. Это потому, что именно так React знает, когда удалять классы анимации из элемента, а когда удалять элемент из DOM.
Сохраните вышеуказанные изменения и обновите страницу. Как только страница загрузится, через несколько секунд вы сможете увидеть анимированный текст.
Анимация входа / выхода
Чтобы лучше понять анимацию входа и выхода, мы создадим небольшое приложение React. Приложение будет иметь текстовое поле для ввода имени. Вы увидите, как добавить анимацию ввода при добавлении имени в список.
Внутри app.js создайте новый класс с именем App .
|
1
2
3
|
class App extends React.Component {
}
|
Инициализируйте список data и переменную name в начальном состоянии компонента.
|
1
2
3
4
5
6
7
8
9
|
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
data: [],
name:»
};
}
}
|
Внутри части рендеринга компонента App поместите текстовое поле для ввода имени и кнопку, чтобы добавить имя в список массивов.
|
1
2
3
|
<div>
Enter Name <input onChange={this.handleChange} type=»text» /> <input onClick={this.add} type=»button» value=»Add» />
</div>
|
Определите событие input handleChange событие add внутри компонента App.
|
1
2
3
|
handleChange(e){
this.setState({name:e.target.value})
}
|
Событие handleChange устанавливает значение входного текстового поля в переменную name . Вот как выглядит метод add:
|
1
2
3
4
5
|
add(){
var arr = this.state.data.slice();
arr.push({‘id’:(new Date()).getTime(),’name’:this.state.name})
this.setState({data:arr})
}
|
Внутри метода add введенное имя и уникальный идентификатор помещаются в список массивов data .
handleChange и add метод в конструктор компонента App.
|
1
2
3
4
5
6
7
8
9
|
constructor(props) {
super(props);
this.add = this.add.bind(this);
this.handleChange = this.handleChange.bind(this);
this.state = {
data: [],
name:»
};
}
|
Вы будете отображать введенные имена в списке. Измените HTML-код рендеринга, чтобы добавить список.
|
1
2
3
4
5
6
7
|
<ul>
{
this.state.data.map(function(player) {
return <li key={player.id}>{player.name}</li>
})
}
</ul>
|
Чтобы анимировать вновь добавленные элементы, мы добавим тег ReactCSSTransitionGroup поверх элементов li .
|
1
2
3
4
5
6
7
8
9
|
<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 .
|
1
2
3
4
5
6
7
8
|
.anim-enter {
opacity: 0.01;
}
.anim-enter.anim-enter-active {
opacity: 2;
transition: opacity 5s ease-in;
}
|
Вот полный компонент приложения:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
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>
)
}
}
|
Сохраните вышеизложенное и обновите страницу. Введите имя и нажмите кнопку добавления, и элемент должен быть добавлен в список с анимацией.
Аналогично, анимация ухода также может быть реализована в приведенном выше коде. После того, как в приложении будет реализована функция удаления, добавьте в index.html класс leave и leave-active . Установите значение transitionLeave ReactCSSTransitionGroup True в теге ReactCSSTransitionGroup в методе рендеринга, и все будет хорошо.
Завершение
В этом уроке вы увидели, как начать использовать анимацию в React. Вы создали простое приложение React и увидели, как реализовать анимацию появления и ввода. Для получения более подробной информации об анимации в React, я бы рекомендовал прочитать официальную документацию .
Исходный код этого руководства доступен на GitHub .
За последние пару лет популярность React возросла. Фактически, у нас есть ряд товаров на рынке, которые доступны для покупки, просмотра, реализации и так далее. Если вы ищете дополнительные ресурсы по React, не стесняйтесь проверить их .
Дайте нам знать ваши мысли в комментариях ниже. Загляните на мою страницу инструктора Envato Tuts +, чтобы узнать больше о React и связанных с ним веб-технологиях.