Transition Group в React: Плавные анимации при переключении между компонентами

React Transition Group - это библиотека для React, которая облегчает анимацию обновлений пользовательского интерфейса. Она позволяет производить анимацию, когда React компоненты удаляются, появляются или обновляются на странице.

Transition Group - это компонент, который позволяет определить, как React должен анимировать изменения в дочерних компонентах.

Пример использования Transition Group:

import React from 'react';
import TransitionGroup from 'react-transition-group/TransitionGroup';
import CSSTransition from 'react-transition-group/CSSTransition';
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {items: ['Item 1', 'Item 2', 'Item 3']};
    this.handleAdd = this.handleAdd.bind(this);
  }
  handleAdd() {
    const newItems = this.state.items.concat([prompt('Enter Item Name')]);
    this.setState({items: newItems});
  }
  handleRemove(i) {
    let newItems = this.state.items.slice();
    newItems.splice(i, 1);
    this.setState({items: newItems});
  }
  render() {
    return (
      

        Add Item
        
          {this.state.items.map((item, i) => (
            
              

                {item}
                 this.handleRemove(i)}>Remove Item
              
            
          ))}
        
      
    );
  }
}

В этом примере мы создаем компонент MyComponent, который содержит кнопку "Add Item" и список элементов, каждый из которых имеет кнопку "Remove Item". Когда мы добавляем новый элемент, он появляется на странице с анимацией, а когда мы удаляем элемент, он исчезает с анимацией.

Мы используем Transition Group, чтобы определить, что элементы в списке должны быть анимированы. Для каждого элемента мы используем CSSTransition, чтобы определить, какой класс должен быть применен при добавлении или удалении элемента.

Таким образом, мы можем использовать React Transition Group для добавления анимации при обновлении пользовательского интерфейса в React приложениях.