React Transition for Dummies | Difference between CSSTransition and Transition

Bounce, Fade, Animate

05/03/2019 11:56:52 PM

Intro into React Transitions

In case you are a newbie in the world of react transitions, you should probably read this post (React Transitions for Dummies | Part 1 : Transition, Styled Components and RandomColor) before continuing.

<Transition>

If you want to animate a react component, wrap it with <Transition> component so that you can gain access to the state of what is being animated. There are four main states: entering, entered, exiting and exited. The following is a simple example of using the transition to fade in a text box on click and fade out on the next click.

Example of <Transition> Component Usage
 See the Pen <a href="https://codepen.io/AJALACOMFORT/pen/PvoYYe/">React Transitons: Simple Usage of <Transition></a> by Ajala Comfort (<a href="https://codepen.io/AJALACOMFORT">@AJALACOMFORT</a>) on <a href="https://codepen.io">CodePen</a>.

<CSSTransition>

This component is an extension of the <Transition> component and I mainly use this when I want to use CSS to animate my component rather than javascript. Here is an example of using this component to achieve the exact same goal as above.

Example of <CSSTransition> Component Usage See the Pen <a href="https://codepen.io/AJALACOMFORT/pen/arboBB/">React Transitons: Simple Usage of <CSSTransition></a> by Ajala Comfort (<a href="https://codepen.io/AJALACOMFORT">@AJALACOMFORT</a>) on <a href="https://codepen.io">CodePen</a>.

Note: The classes are added to the classList of the node you are animating one after the other and removed. So you do not need to add a transition property in the style for each of the classes.

Examples

Here are slightly more interesting ways of using these components for you web application.

Transitions

The goal here was to animate the opening of each “item” from the list of items by expanding it to fill the room.

CSSTransitions

Compared to the above example, this one is very simple and straightforward. The goal here was to show different ways of animating a textbox on click. One way is to simply show the box, just after the action button had faded out, while the other method involved initially fading out the text in the action button, then increasing both its width and its height and followed by a slow fade in of the text. So basically, one is over the top (unnecessary) and the other is simple.