React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

React Transition Group gives you the power to transition React components in and out of the DOM, depending on the state they’re tied to, with no weird hacks. Without React Transition Group, you may find yourself using a lot of `display: none` in your CSS, along with some pretty nasty `setTimeout` hacks. But with it, you can write your transition elements with a neat, declarative, all-new API — and no hacks in sight. 

You’ll get to explore v2 of the API in this course, as Rory Smith shows you how to use the React Transition Group library to write seamless, performant, beautiful transitions of elements in and out of the DOM. (i.e. no more jumping from state to state without warning.)

You’ll learn the features of React Transition Group in depth, so that you can turn features of your React app from dull and boring to slick and seamless.

In this course, we are going to learn about the fantastic React Transition Group library.

React Transition Group allows us to transition components in and out of the DOM in a declarative, neat, and efficient way.

I've personally used React Transition Group in my work as a front end developer, and usage of the library has allowed me to improve the user interface of several projects simply by applying subtle transitions with React Transition Group.

In this course we're going to concentrate on the `CSSTransition` and `TransitionGroup` components of React Transition Group. I'm going to be using a menu component to show you how React Transition Group works, hopeful that you can apply the same approaches to your own user interfaces with your own CSS transitions.

We're going to be looking at practical examples like using transitions with CSS-in-JS, and transitioning pages alongside react-router.

I hope you enjoy experimenting with React Transition Group alongside me. Animation brings user interface to life!

Course Overview: Create Smooth, Performant Transitions with React Transition Group v2

In React Transition Group, there are two components at our disposal for transitions of singular components; `<Transition>` and `<CSSTransition>`. In this lesson, we’re going to discuss the key feature that CSSTransition has over Transition, i.e. forcing reflows to make more complex transitions more predictable. We’ll also look at how to use the key props of any transition; `in`, `timeout`, and `children`. 

Transition a React Component using CSS with RTG’s `CSSTransition` component 

In React Transition Group, it can be a common situation for a transition to appear when the component renders, rather than wait for any state to change based on, for example, a button click. Should we want the component to show on mounting, instead of waiting for any state to change, we can make use of the `appear` prop, which adds two targetable classnames; `*-appear` and `*-appear-active`.

Show React Transition Group Elements with an Initial Transition with the `appear` Prop

In React Transition Group, enter and exit transitions occur by default. However, sometimes that may not be the required behaviour. In this lesson, let’s take a look at how to change this behaviour, using the `enter`, and `exit` props.

Disable RTG enter and/or exit Transitions using the `enter`, and `exit` Props

In React Transition Group, there are six ‘lifecycle’ props at our disposal: `onEnter`, `onEntering`, `onEntered`; `onExit`, `onExiting`, and `onExited`. In this lesson, let’s take a look at how we can fine-tune our transition’s behaviour by using these props, in situations where we may want certain events to occur during or after a transition.

Fine-tune Transitions with React Transition Group’s Lifecycle Props

In React Transition Group, There are two components available to use for transitioning single children; `<Transition>` and `<CSSTransition>`. However, what if we want to transition a list of elements? For that, we need to make use of the `<TransitionGroup>` component. In this lesson, we’re going to use this component to transition items in a list of elements in and out of the DOM. 

Transition Items within a List with React Transition Group

In React Transition Group, the `<TransitionGroup>` component uses a standard `<div>` as its container element. This can be changed to whichever HTML element you like. This can be very important for accessibility and maintaining DOM readability. We can also pass `null` as the `component`, which means no container element is used at all. This can be important for styling.

Render a Different HTML Element as the `<TransitionGroup>` Container Element

It’s possible to use React Transition Group for transitions between pages. This can be a clever and useful boost to overall user experience in your app. In this lesson, we’re going to transition between pages using React Transition Group and React Router 4. 

Transition between Pages with React Transition Group and React Router

In React Transition Group, it’s possible to use JSS to write transitions. In this lesson, we’re going to write a transition using JSS to find out how it differs from writing standard CSS or inline styles.

Write Transitions with React Transition Group using JSS

It’s possible to use React Transition Group alongside Styled Components. This can be useful should you want to use `<CSSTransition>` but are also taking advantage of the Styled Components library. In this lesson, we are going to take a look at the `styled-transition-group` library in order to achieve this.

Course Content