React JS — анимация

React JS — анимация

От автора: в этой главе мы узнаем, как делается в React js анимация.

Шаг 1 — Установите React CSS Transitions Group

Это надстройка React, используемая для создания базовых CSS-переходов и анимации. Мы установим ее из окна командной строки:

Шаг 2 — Добавьте файл CSS

Давайте создадим новую папку css и в ней файл style.css. Чтобы иметь возможность использовать его в приложении, нам нужно привязать его в элементе head в index.html.

Шаг 3 — Анимация

Мы создадим базовый компонент React. Элемент ReactCSSTransitionGroup будет использоваться как оболочка компонента, который мы хотим анимировать. Он будет использовать transitionAppear и transitionAppearTimeout, а для transitionEnter и transitionLeave будет установлено false.

App.jsx

Анимация CSS очень проста.

css/style.css

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

Шаг 4 — Анимации ввода и исключения

Анимацию ввода и исключения можно использовать, когда мы хотим добавить или удалить элементы из списка.

App.jsx

main.js

css/style.css

Когда мы запустим приложение и нажмем кнопку «Add Item», появится форма.

Когда мы введем имя и нажмем OK, всплывет новый элемент.

Теперь мы можем удалить некоторые элементы (Item 3…), кликнув на них. Этот элемент исчезнет из списка.

Источник: https://www.tutorialspoint.com/

Редакция: Команда webformyself.

FullStack-Мастер

FullStack-Мастер. Разработка CRM-системы на Node.js, Express, Angular 6

Научиться

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree