Transition Group React
<p>Transition Group - это компонент библиотеки React, который предоставляет различные возможности для управления анимацией при появлении, исчезновении или изменении компонентов. Он работает в сочетании с компонентом Transition, позволяя группе компонентов анимировать одновременно.</p> <p>Для начала работы с Transition Group необходимо установить пакетreact-transition-group через npm или yarn:</p>
<pre><code>npm install react-transition-group</code></pre>
<p>После установки пакета можно импортировать необходимые компоненты в своем файле JavaScript:</p>
<pre><code>import { TransitionGroup, CSSTransition } from 'react-transition-group';</code></pre>
<p>TransitionGroup - это обертка, которая позволяет группе компонентов анимироваться одновременно. Внутри TransitionGroup должны быть обернуты компоненты, которые вы хотите анимировать. Например, допустим у нас есть список элементов, которые должны исчезать с плавной анимацией при удалении:</p>
<pre><code>import React, { useState } from 'react';</code></pre>
<pre><code>const App = () => {
const [items, setItems] = useState([1, 2, 3]);
const removeItem = (item) => {
setItems(items.filter((i) => i !== item));
};
return (
<TransitionGroup>
{items.map((item) => (
<CSSTransition key={item} timeout={500} classNames="fade">
<div className="item">
{item}
<button onClick={() => removeItem(item)}>Удалить</button>
</div>
</CSSTransition>
))}
</TransitionGroup>
);
};
export default App;
</code></pre>
<p>В приведенном примере мы создали компонент App, который содержит список элементов в состоянии items. При нажатии на кнопку "Удалить" элемент исчезает с плавной анимацией. Для анимации используется компонент CSSTransition из библиотеки react-transition-group. Мы передаем ему ключ, время анимации и имя класса для анимации.</p>
<p>CSS-стили для анимации можно определить следующим образом:</p>
<pre><code>.fade-enter {
opacity: 0;
}
.fade-enter-active {
opacity: 1;
transition: opacity 500ms;
}
.fade-exit {
opacity: 1;
}
.fade-exit-active {
opacity: 0;
transition: opacity 500ms;
}
</code></pre>
<p>В данном случае мы определили анимацию для появления и исчезновения элементов с использованием свойства opacity и длительностью 500 миллисекунд. Классы "fade-enter" и "fade-exit" являются начальными состояниями анимации, а классы "fade-enter-active" и "fade-exit-active" - состояниями, когда анимация происходит.</p>
<p>Таким образом, Transition Group React предоставляет мощные инструменты для организации анимации в React-приложениях. Вы можете контролировать появление, исчезновение и изменение компонентов с определенными эффектами анимации, что может значительно улучшить пользовательский интерфейс и визуальный опыт. Это особенно полезно при создании комплексных страниц или приложений, где используются динамические переходы и анимации.</p>