Using the CSSTransition Component

Let’s begin by creating a simple button that will display something when the user clicks on it.

Inside the my-app ‘s src folder, open the index.js file and replace the code inside it with the one shown below:

We will also need to work a little bit on our CSS, but I don’t want to make this post unnecessarily long, so just go here and copy the code in to index.css file in your src folder. Don’t worry, we will take a look at it soon.

Open your browser and you will get something like this:

When the user clicks on the button, the onClick triggers the toggle method, which changes the state of the application. Based on this state, the list is either displayed or hidden from the view.

You can see that the list is suddenly appearing on and disappearing from the screen. What if you want it to make this change a little smoother?

The React Transition Group contains three main components:

Transition

CSSTransition

TransitionGroup

The Transition and CSSTransition components can be use to handle transition of single components. Let’s start by taking a look at how we can us the CSSTransition component to make the above button and its function smoother.

Let’s start by importing the CSSTransition component from the react-transition-group library into the index.js file.

import {CSSTransition} from 'react-transition-group';

CSSTransition allows us to apply CSS transitions to DOM elements. In the render method, replace the this.state.display line with the CSSTransition component. This component will have an in prop which will check the boolean value of this.state.display . Also, the component will have a timeout prop which will describe the amount of milliseconds it will take for the element to enter or leave the DOM. We will also need to pass a classNames prop which will have a string as its value, and will tell our component which CSS properties to apply to the component’s transition. The unmountÒnExit prop is used to completely remove something from the DOM, instead of just hiding it away from the view.

So wrap the <ul> and everything inside it in the <CSSTransition> as shown below:

<CSSTransition

in={this.state.display}

timeout={350}

classNames="display"

unmountOnExit

>

<div className="menu">

<ul className="list">

<li className="list-item">Rajat</li>

<li className="list-item">Writes about React</li>

<li className="list-item">Loves Pizza</li>

</ul>

</div>

</CSSTransition>

Let’s take look at what we have in our browser now:

How did this happen? All we did was wrap the list inside the <CSSTransition> component. Let’s take a look at the CSS code inside index.css file to know more.

First, we have list of variables defined, that control the colors and measurements of the button and the list. We also have a timeout value set to 350ms, same as that of the timeout prop inside the CSSTransition component.

Then, we have set the style for the button and the list that is to be displayed. Nothing special here, we do this all the time.

After that, we have style code that controls the transition. This is where the CSSTransition component comes into play. The component gives us four class names to use in order to control the entrance and exit of an element from the DOM. These class names are:

display-enter

display-enter-active

display-exit

display-exit-active

The display-enter will be enacted immediately when the element enters the DOM. The display-enter-active will apply once the display-enter is done implementing. This is where we add our transition.

display-exit will trigger when the display state turns false , followed by the display-exit-active , after which the list element will leave the DOM.

The appear prop

Currently the app does not show the list when we initially load the app onto the browser. The user has to click on the button in order to make the list appear on the screen.

What if you want to show the list initially when the page loads? Well then you need to change the display state’s value to true in the code.

state = {

display: true,

};

But now when we take a look at the page in the browser, you will see that the list and the button are just there. Refresh the page, and you will notice that the list appear instantly, without any transition.

You can implement an initial transition by adding the appear prop to the <CSSTransition> component as shown below:

<CSSTransition

in={this.state.display}

timeout={350}

classNames="display"

unmountOnExit

appear

>

Then, go to the index.css file and add .display-appear to .display-enter and .display-appear-active to .display-enter-active as shown below:

.display-enter, .display-appear {

top: var(--menu-starting-top);

width: var(--toggler-width);

max-height: var(--toggler-height);

color: var(--fade-from-color);

background-color: var(--toggler-bg-color);

} .display-enter-active, .display-appear-active {

top: var(--menu-ending-top);

width: var(--menu-width);

max-height: var(--menu-max-height);

color: var(--fade-to-color);

background-color: var(--menu-bg-color);

transition: all var(--timeout);

}

If you refresh the browser, you will get to see the initial transition like this:

Enter and Exit

In order to disable a particular transition, we can use the enter and exit props.

If you pass the enter prop to the CSSTransition with a value of false , then the entrance transition will be disabled.