Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. React
Code

Введение в анимацию в React

by
Difficulty:BeginnerLength:ShortLanguages:

Russian (Pусский) translation by Ilya Nikov (you can also view the original English article)

В последних двух учебниках React вы познакомились с базовыми концепциями React, такими как JSX, routing и forms. В этом уроке мы перейдем на следующий уровень и попытаемся понять анимацию в React.

Начинаем

Создайте каталог под названием ReactAnimations. Перейдите в каталог и инициируйте проект с помощью Node Package Manager или npm.

Установите react и react-dom в проект.

Для этого проекта мы будем использовать webpack. Установите сервер разработки webpack и webpack.

Установите пакет babel для преобразования синтаксиса JSX в JavaScript в нашем проекте.

Создайте файл конфигурации, требуемый webpack-dev-server, где мы определим точку входа, выходной файл и загрузчик babel. Вот как выглядит webpack.config.js:

Создайте файл index.html, в котором будет отображаться приложение. Вот как это выглядит:

Создайте файл под названием app.js. Внутри app.js импортируются необходимые библиотеки react:

Создайте компонент без состояния, называемый Home, который отображает тег H1.

Отрисуйте компонент Home внутри элемента app на странице index.html. Вот как выглядит app.js:

Сохраните указанные выше изменения и запустите сервер webpack. У вас должно быть приложение, запущенное по адресу http://localhost:8080/index.html.

Анимации в React

React предоставляет ряд дополнительных утилит для создания приложений React. TransitionGroup и CSSTransitionGroup - это API, предоставляемые для анимации.

Из официальной документации,

Дополнительный компонент ReactTransitionGroup является низкоуровневым API для создания анимации, а ReactCSSTransitionGroup является дополнительным компонентом для простой реализации основных анимаций и переходов CSS.

Анимация появления

Начнем с простой анимации в React. Установите в проект react-addons-css-transition-group.

Импортируйте ReactCSSTransitionGroup в файл app.js.

Внутри созданного компонента Home оберните тег h2 внутри тега ReactCSSTransitionGroup.

Используя тег ReactCSSTransitionGroup, вы определили ту часть, где будет происходить анимация. Вы указали имя для перехода, используя transitionName. Вы также определили, должен ли появляться переход, входить и уходить, или нет.

Используя имя перехода, определенное внутри ReactCSSTransitionGroup, вы определите классы CSS, которые будут выполняться при появлении и в активном состоянии. Добавьте следующий CSS-стиль на страницу index.html.

Как вы могли заметить, вам нужно указать продолжительность анимации как в методе визуализации, так и в CSS. Это потому, что React знает, когда нужно удалить классы анимации из элемента и когда удалить элемент из DOM.

Сохраните приведенные выше изменения и обновите страницу. Как только страница загрузится, в течение нескольких секунд вы сможете увидеть анимированный текст.

Ввод/выключение анимации

Чтобы лучше понять анимацию ввода и ухода, мы создадим небольшое приложение React. Приложение будет иметь текстовое поле ввода для ввода имени. Вы увидите, как добавить анимацию ввода, когда имя добавлено в список.

Внутри app.js создайте новый класс под названием App.

Инициализируйте список data и переменную name внутри исходного состояния компонента.

Внутри части рендеринга компонента App поместите текстовое поле ввода для ввода имени и кнопку, чтобы добавить имя в массив списка.

Определите событие ввода handleChange и событие add внутри компонента App.

Событие handleChange устанавливает значение входного текстового поля в переменную name. Вот как выглядит метод add:

Внутри метода add введенное имя и уникальный идентификатор помещаются в массив data.

Свяжите метод handleChange и add в конструкторе компонента приложения.

Вы будете отображать введенные имена внутри списка. Измените HTML-код рендеринга, чтобы добавить список.

Чтобы оживить вновь добавленные элементы, мы добавим тег ReactCSSTransitionGroup поверх элементов li.

Добавьте следующий стиль перехода CSS на страницу index.html.

Вот полный компонент App:

Сохраните выше и обновите страницу. Введите имя и нажмите кнопку добавления, и элемент должен быть добавлен в список с анимацией.

Аналогично, анимация выхода также может быть реализована в вышеуказанном коде. После того, как функциональность удаления была реализована в приложении, добавьте класс leave и leave-active в файл index.html. Установите для параметра transitionLeave значение True в теге ReactCSSTransitionGroup в методе рендеринга, и все должно заработать.

Подведем итоги

В этом уроке вы узнали, как начать работу с анимацией в React. Вы создали простое приложение React и увидели, как реализовать появление и ввод анимации. Для подробной информации об анимации в React я бы рекомендовал прочитать официальную документацию.

Исходный код этого учебника доступен в GitHub.

За последние пару лет React стал популярным. На самом деле, у нас есть ряд продуктов на рынке, доступных для покупки, просмотра, реализации и т.д. Если вы ищете дополнительные ресурсы вокруг React, не стесняйтесь их просмотреть.

Сообщите нам свои мысли в комментариях ниже. Взгляните на мою страницу инструктора Envato Tuts + для получения дополнительных уроков по React и связанных с ними веб-технологиям.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.