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

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

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

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

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

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

Итак, для начала импортируйте 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».