GoConqr has a new look! Let us know what you think.

Module 3 of 6 · Media

Transition Group component

Kostas Diakogiannis

Transition Group component

The TransitionGroup component

Let's try to enrich our existing todo application,by applying some transitions and animations within it. 

In our case we are going to use both components since we are going to fade in and fade out all the li elements inside our ul.

The first thing we want to do is to identify the elements we want to apply the transition and replace the parent element of these (in our case the  ul element) with the given component from the library (TransitionGroup) exactly as the code shows above.

This semantically is for the DOM an empty component that just notifies React that all the children of this can be transitioned when mounting or unmounting from the DOM.

 

Instructions

You must submit an attempt for this quiz to progress. You can submit it after the last question.

Go to the chosen module

Feedback

What is it about?

What do you think of the new look?

How do you like it?