egghead
Проект egghead.io представляет огромный выбор курсов и скринкастов для разработчиков любого уровня и профессии.
Создание гладких, совершенных переходов с React Transition Group v2
Create Smooth, Performant Transitions with React Transition Group v2
★5 (всего оценок - 19)
Продолжительность
0 ч 33 мин
Категория
React.jsКоличество уроков
10 Видео
Дата добавления
6 февр. 2019 г., 16:33
Язык
Английский
Дата обновления
29 апр. 2026 г., 02:20
Хотите создавать по‑настоящему плавные, предсказуемые и эстетичные анимации в React? В этом курсе вы научитесь использовать React Transition Group v2 так, чтобы любые появления, исчезновения и изменения состояния элементов выглядели естественно, аккуратно и без хака на setTimeout или лишних display: none.
Что вы узнаете на курсе
Курс подробно разберет возможности React Transition Group v2 и научит применять их в реальных проектах. Благодаря практическим примерам вы поймёте, как превращать «резкие» изменения интерфейса в плавные переходы, которые улучшают UX и делают приложение более профессиональным.
Ключевые преимущества React Transition Group
- Декларативный подход — описывайте переходы через компоненты, а не сложные цепочки событий.
- Гибкость — используйте CSS-анимации, inline‑стили или JavaScript‑коллбеки.
- Никаких хаков — больше не нужно вручную управлять задержками через setTimeout.
- Контроль жизненного цикла — стадии enter/exit дают полный контроль над появлением и исчезновением элементов.
Чему вас научит Рори Смит
Опытный разработчик Рори Смит проведёт вас через все этапы работы с React Transition Group и поможет освоить продвинутые техники анимации.
Темы, которые будут разобраны
- Настройка и подключение библиотеки
- Использование компонентов Transition и CSSTransition
- Создание плавных enter/exit переходов
- Работа с TransitionGroup и списочными анимациями
- Тонкая настройка таймингов и коллбеков
- Построение собственных переходов под нужды приложения
Почему это важно для ваших React‑приложений
Плавные переходы делают интерфейсы интуитивно понятнее, приятнее и профессиональнее. Вместо внезапных изменений состояния пользователь видит аккуратные переходы между экранами и компонентами. Это улучшает восприятие приложения и повышает вовлеченность.
После прохождения курса вы сможете
- добавлять анимацию в любое React‑приложение без хаоса в коде;
- создавать библиотеку собственных переходов для повторного использования;
- оптимизировать производительность анимаций;
- делать интерфейсы более выразительными и живыми.
Итог
Курс поможет вам уверенно владеть React Transition Group v2 и использовать её так, чтобы ваши приложения выглядели современно и плавно. После обучения переходы станут не просто декоративным элементом, а мощным инструментом улучшения UX.
- Урок 1.00:01:05Course Overview: Create Smooth, Performant Transitions with React Transition Group v2
- Урок 2.00:07:11Transition a React Component using CSS with RTG’s `CSSTransition` component
- Урок 3.00:01:33Show React Transition Group Elements with an Initial Transition with the `appear` Prop
- Урок 4.00:01:11Disable RTG enter and/or exit Transitions using the `enter`, and `exit` Props
- Урок 5.00:02:56Fine-tune Transitions with React Transition Group’s Lifecycle Props
- Урок 6.00:04:41Transition Items within a List with React Transition Group
- Урок 7.00:01:30Render a Different HTML Element as the `<TransitionGroup>` Container Element
- Урок 8.00:07:09Transition between Pages with React Transition Group and React Router
- Урок 9.00:03:32Write Transitions with React Transition Group using JSS
- Урок 10.00:03:02Use React Transition Group alongside the Styled Components library
Автор - egghead
Комментарии