ReactTransitionGroup: создаём анимацию в React | OTUS
🔥 Начинаем BLACK FRIDAY!
Максимальная скидка -25% на всё. Успейте начать обучение по самой выгодной цене.
Выбрать курс

Курсы

Программирование
iOS Developer. Basic
-25%
Python Developer. Professional
-25%
Разработчик на Spring Framework
-25%
Golang Developer. Professional
-25%
Python Developer. Basic
-25%
iOS Developer. Professional
-25%
Highload Architect
-25%
JavaScript Developer. Basic
-25%
Kotlin Backend Developer
-25%
JavaScript Developer. Professional
-25%
Android Developer. Basic
-25%
Unity Game Developer. Basic
-25%
Разработчик C#
-25%
Программист С Web-разработчик на Python Алгоритмы и структуры данных Framework Laravel PostgreSQL Reverse-Engineering. Professional CI/CD Vue.js разработчик VOIP инженер Программист 1С Flutter Mobile Developer Супер - интенсив по Kubernetes Symfony Framework Advanced Fullstack JavaScript developer Супер-интенсив "Azure для разработчиков"
Инфраструктура
Мониторинг и логирование: Zabbix, Prometheus, ELK
-25%
DevOps практики и инструменты
-25%
Архитектор сетей
-25%
Инфраструктурная платформа на основе Kubernetes
-25%
Супер-интенсив «ELK»
-16%
Супер-интенсив «IaC Ansible»
-16%
Супер-интенсив "SQL для анализа данных"
-16%
Базы данных Сетевой инженер AWS для разработчиков Cloud Solution Architecture Разработчик голосовых ассистентов и чат-ботов Внедрение и работа в DevSecOps Администратор Linux. Виртуализация и кластеризация Нереляционные базы данных Супер-практикум по использованию и настройке GIT IoT-разработчик Супер-интенсив «СУБД в высоконагруженных системах»
Специализации Курсы в разработке Подготовительные курсы
+7 499 938-92-02

ReactTransitionGroup: создаём анимацию в React

В этой небольшой заметке мы рассмотрим такой компонент, как ReactTransitionGroup. Он был разработан специалистами из сообщества ReactJs и позволяет легко реализовывать базовые CSS-анимации и переходы.

Сами разработчики описывают данный инструмент, как набор компонентов, специально разработанный для создания анимации и позволяющий управлять состояниями с течением времени.

Что нужно знать о ReactTransitionGroup

Три вещи, которые вы должны знать об этом компоненте: 1. ReactTransitionGroup меняет классы в случае изменении жизненного цикла компонента. При этом анимированный стиль должен описываться в CSS-классах. 2. ReactTransitionGroup имеет совсем небольшой размер. Его нужно устанавливать в пакете для React-приложения, причём сборка увеличится крайне незначительно. Кроме того, можно применять CDN. 3. ReactTransitionGroup включает 3 компонента: CSSTransition, Transition и TransitionGroup. Для запуска анимации достаточно обернуть компонент в них.

Давайте рассмотрим, как сделать анимацию по аналогий с той, что на рисунке ниже:

react_app_animation_pic_2_1-20219-c0670b.gif

Итак, для начала импортируйте CSSTransitionGroup из react-transition-group. Потом оберните список и установите свойство transitionName. Каждый раз, когда в CSSTransitionGroup будет добавляться или удаляться дочерний элемент, он будет получать стили анимации.

<CSSTransitionGroup
    transitionName="example"
>
    {items}
</CSSTransitionGroup>

Обратите внимание, что если установлено свойство transitionName = "example", классы в ваших таблицах стилей должны будут начинаться с имени примера.

.example-enter {
    opacity: 0.01;
}

.example-enter.example-enter-active {
    opacity: 1;
    transition: opacity 300ms ease-in;
}

.example-leave {
    opacity: 1;
}

.example-leave.example-leave-active {
    opacity: 0.01;
    transition: opacity 300ms ease-in;
}

Таким образом, вы сможете увидеть базовое использование компонента ReactTransitionGroup.

Теперь добавим логики. Нужно описать 2 метода для реализации примера списка контактов: 1) handleAdd — осуществляет добавление новых контактов, получая случайное имя и помещая его непосредственно в массив state.items. (если имя случайное, используется пакет random-name); 2) handleRemove — контакт удаляется по индексу в массиве state.items.

import React, { Component, Fragment } from 'react';
import { CSSTransitionGroup } from 'react-transition-group'
import random from 'random-name'
import Button from './button'
import Item from './item'
import './style.css';

export default class ReactTransitionGroup extends Component {

    constructor(props) {
        super(props);
        this.state = { items: ['Natividad Steen']};
        this.handleAdd = this.handleAdd.bind(this);
    }

    handleAdd() {
        let newItems = this.state.items;
        newItems.push(random());
        this.setState({ items: newItems });
    }

    handleRemove(i){
        let newItems = this.state.items.slice();
        newItems.splice(i,1);
        this.setState({items: newItems});
    }

    render () {
        const items = this.state.items.map((item, i) => (
            <Item
            item={item}
            key={i}
            keyDelete={i}
            handleRemove={(i) => this.handleRemove(i)}
            />
        ));

        return (
            <Fragment>
                <Button onClick={this.handleAdd}/>
                    <div className="project">
                        <CSSTransitionGroup
                        transitionName="example"
                        transitionEnterTimeout={500}
                        transitionLeaveTimeout={300}
                        >
                            {items}
                        </CSSTransitionGroup>
                    </div>
            </Fragment>
        );
    }
};

Источник — «5 Ways to animate a React app».

Не пропустите новые полезные статьи!

Спасибо за подписку!

Мы отправили вам письмо для подтверждения вашего email.
С уважением, OTUS!

Автор
0 комментариев
Для комментирования необходимо авторизоваться
🎁 Максимальная скидка!
Черная пятница уже в OTUS! Скидка -25% на всё!