ReactJS - Анимация: Оживление Ваших Компонентов

Здравствуйте, будущие маги анимации React! Я очень рад быть вашим проводником в этом захватывающем путешествии в мир анимаций ReactJS. Как someone кто преподавал информатику на протяжении многих лет, я могу сказать, что анимации resemble secret sauce, который делает ваши приложения не только функциональными, но и downright delightful. Так что давайте окунемся и заставим наши компоненты танцевать!

Магия React Transition Group

Before мы начнем жонглировать анимациями, давайте поймем, что такое React Transition Group. Представьте его как ящик с полезными приспособ, которые помогают нам создавать плавные, привлекающие внимание переходы в наших приложениях React.

Установка React Transition Group

First things first, мы должны пригласить React Transition Group на наш проект. Откройте ваш терминал и введите:

npm install react-transition-group

или если вы fan yarn:

yarn add react-transition-group

Отлично! Теперь у нас есть наши анимационные суперсилы у нас под рукой.

Transition: Основной Элемент Анимаций

Компонент Transition resemble foundation дома. Он дает нам прочную основу для создания наших анимаций. Давайте посмотрим на него в действии с простым примером:

import React, { useState } from 'react';
import { Transition } from 'react-transition-group';

const duration = 300;

const defaultStyle = {
transition: `opacity ${duration}ms ease-in-out`,
opacity: 0,
}

const transitionStyles = {
entering: { opacity: 1 },
entered:  { opacity: 1 },
exiting:  { opacity: 0 },
exited:  { opacity: 0 },
};

const FadeInOut = () => {
const [inProp, setInProp] = useState(false);

return (
<div>
<Transition in={inProp} timeout={duration}>
{state => (
<div style={{
...defaultStyle,
...transitionStyles[state]
}}>
Я тускнеющий текст!
</div>
)}
</Transition>
<button onClick={() => setInProp(!inProp)}>
Нажмите, чтобы затемнить
</button>
</div>
);
};

Давайте разберем это:

1. Мы импортируем Transition из 'react-transition-group'.
2. Мы устанавливаем некоторые стили: defaultStyle для нашего начального состояния и transitionStyles для разных фаз перехода.
3. Наш компонент FadeInOut использует состояние inProp для управления видимостью.
4. Компонент Transition принимает два основных пропса: in (наш состояние видимости) и timeout (длительность анимации).
5. Внутри Transition мы используем функцию, которая принимает текущее состояние перехода и применяет соответствующий стиль.

When вы нажимаете кнопку, вы увидите, как текст плавно появится и исчезнет. Волшебство, правда?

CSSTransition: Когда CSS встречается с React

Теперь давайте повысим уровень нашей игры с помощью CSSTransition. Это как cool sibling Transition, который работает безупречно с CSS классами. Вот fun пример:

import React, { useState } from 'react';
import { CSSTransition } from 'react-transition-group';
import './styles.css'; // Мы создадим это через мгновение

const Superhero = () => {
const [inProp, setInProp] = useState(false);

return (
<div>
<CSSTransition in={inProp} timeout={300} classNames="super">
<div className="superhero">
Я супергерой!
</div>
</CSSTransition>
<button onClick={() => setInProp(!inProp)}>
Преобразовать!
</button>
</div>
);
};

И вот наш CSS (в styles.css):

.superhero {
background-color: #f0f0f0;
padding: 20px;
border-radius: 5px;
}

.super-enter {
opacity: 0;
transform: scale(0.9);
}
.super-enter-active {
opacity: 1;
transform: translateX(0);
transition: opacity 300ms, transform 300ms;
}
.super-exit {
opacity: 1;
}
.super-exit-active {
opacity: 0;
transform: scale(0.9);
transition: opacity 300ms, transform 300ms;
}

Вот что происходит:

1. Мы используем CSSTransition вместо Transition.
2. Мы указываем classNames="super", что tells React использовать классы, такие как super-enter, super-enter-active и т.д.
3. Наш CSS define, как компонент должен выглядеть на каждой фазе перехода.

When вы нажимаете "Transform!", наш супергерой появится и исчезнет с эффектом масштабирования. Это как watching a superhero movie, но в вашем браузере!

TransitionGroup: Управление Множеством Переходов

Last but not least, давайте поговорим о TransitionGroup. Это как conductor в оркестре, управляющий множеством переходов одновременно. Вот практический пример:

import React, { useState } from 'react';
import { CSSTransition, TransitionGroup } from 'react-transition-group';
import './list-styles.css';

const TodoList = () => {
const [items, setItems] = useState([]);
const [inputValue, setInputValue] = useState('');

const addItem = () => {
setItems([...items, { id: Date.now(), text: inputValue }]);
setInputValue('');
};

const removeItem = (id) => {
setItems(items.filter(item => item.id !== id));
};

return (
<div>
<input
value={inputValue}
onChange={(e) => setInputValue(e.target.value)}
placeholder="Введите задачу"
/>
<button onClick={addItem}>Добавить</button>
<TransitionGroup className="todo-list">
{items.map(({ id, text }) => (
<CSSTransition
key={id}
timeout={500}
classNames="item"
>
<div className="todo-item">
{text}
<button onClick={() => removeItem(id)}>X</button>
</div>
</CSSTransition>
))}
</TransitionGroup>
</div>
);
};

А соответствующий CSS (list-styles.css):

.todo-list {
list-style-type: none;
padding: 0;
}

.todo-item {
background-color: #f9f9f9;
border: 1px solid #ddd;
padding: 10px;
margin-bottom: 10px;
display: flex;
justify-content: space-between;
}

.item-enter {
opacity: 0;
}
.item-enter-active {
opacity: 1;
transition: opacity 500ms ease-in;
}
.item-exit {
opacity: 1;
}
.item-exit-active {
opacity: 0;
transition: opacity 500ms ease-in;
}

Этот пример создает простой список дел, где элементы появляются и исчезают с эффектом затемнения. Вот разбор:

1. Мы используем TransitionGroup для обертывания нашего списка элементов.
2. Каждый элемент обернут в CSSTransition.
3. When элементы добавляются или удаляются, TransitionGroup управляет переходами автоматически.

Результат? Плавный, профессионально выглядящий список дел, который сделал бы любого руководителя проекта гордым!

Заключение

И вот мы и добрались до конца,folks! Мы совершили путешествие через страну React анимаций, от базового Transition до могучего TransitionGroup. Помните, анимации не просто для того, чтобы сделать вещи красивыми (хотя это отличное дополнение). Они для создания интуитивных,-responsive интерфейсов, которые направляют ваших пользователей через ваше приложение.

Here's a quick reference table of the methods we've covered:

Компонент	Use Case	Key Props
Transition	Основные переходы	in, timeout
CSSTransition	CSS-основанные переходы	in, timeout, classNames
TransitionGroup	Управление множеством переходов	component (опционально)

Теперь, идите и анимируйте! И помните, с великой силой приходит великая ответственность. Используйте анимации мудро, и ваши пользователи будут благодарны вам. Счастливого кодирования!

Credits: Image by storyset