React Transitions and Animations

What if we want to perform animations or transitions to JSX elements? There are react-libraries that help us performing these tasks. For exampling we can perform a transition or an animation, exactly the same way, we would do it in css, when something mounts to or unmounts from the DOM.

The goals is to try to add an animation touch to every list item that is created or deleted by the previous todo list exercise.

We use the ‘react-transition-group’  module in order to achieve this effect. First we need to install it:

npm install --save react-transition-group

Then we need to import two modules.

import { CSSTransition, TransitionGroup } from 'react-transition-group'

Specifically we need two different components, the CSSTransition component which can perform a transition or animation to a solo element, and the TransitionGroup component which can handle the same task but for a group of elements. 

Let's see how.