Анимации в React без библиотек. Плавные переходы с помощью CSS и состояний

✏️ Разберём, почему простая CSS-анимация в React часто осложняется нюансами — компоненты могут размонтироваться раньше, чем отыграет анимация, а при работе с сервером легко получить рассинхрон интерфейса и базы данных. Покажу, как добавить плавное удаление задачи из списка: сначала реализуем простое решение через ref и утилиту useCombinedRefs, а затем соберём более надёжный вариант с состоянием disappearingTaskId, где анимация запускается только после ответа сервера. Добавим и анимацию появления новой задачи с помощью флага appearingTaskId и CSS-ключевых кадров. В итоге наш список задач станет «живым» — элементы не исчезают мгновенно, а плавно уходят и появляются, делая интерфейс аккуратнее и приятнее для пользователя. 🔴 Timeline: ▶ 00:00 | Введение ▶ 00:56 | Анимация удаления задачи из списка — обзор идеи ▶ 02:18 | Анимация удаления задачи из списка — прямолинейное решение через ref и useCombinedRefs ▶ 08:43 | Анимация удаления задачи из списка — продуманное решение через disappearingTaskId ▶ 13:25 | Анимация добавления задачи в список ▶ 17:24 | Заключение 📚 Ссылки из видео: 🧑💻 Основной телеграм-канал: 💬 Коммьюнити-чат в телеграме (помощь новичкам): 🗂️ Бесплатные курсы на канале: 📌 Автор: #reactjs