CSS Animations and Transitions

Linked Projects:

Calreact
 
Lesson code - https://github.com/learnetto/calreact-frontend/tree/m11l2-transitions

In this lesson we’ll look at how to do simple CSS transitions in React.

Let’s start off by installing the react-transition-group library.

npm i react-transition-group —save

Ok now let’s use it to make the appointments component on the homepage fade in, when the page loads.

Let’s first import CSSTransitionGroup from react transition group (Appointments.js lines 1-6):
import React, { PropTypes } from 'react';            
import AppointmentForm from './AppointmentForm';            
import { AppointmentsList } from './AppointmentsList';            
import update from 'immutability-helper';            
import $ from 'jquery';            
importCSSTransitionGroupfrom'react-transition-group/CSSTransitionGroup'; //ES6

This used to be part of React addons, but recently it’s been moved to a separate library.

Then we’ll enclose the AppointmentForm and AppointmentsList components inside a CSSTransitionGroup component.

So let's do CSSTransitionGroup and close tag, and then we’ll pass some props which will define the transition.

We'll give it a transitionName, let's say "home", and then transitionAppear={true}.  
Also transitionAppearTimeout={500} milliseconds.

So we’re saying we want this transition one where the component "home" appears and the time delay is 500 milliseconds. (Appointments.js lines 49-57):

 <div>            
  <CSSTransitionGroup            
    transitionName="home"            
    transitionAppear={true}            
    transitionAppearTimeout={500} >            
    <AppointmentForm handleNewAppointment={this.addNewAppointment} />            
    <AppointmentsList appointments={this.state.appointments} />            
  </CSSTransitionGroup>            
</div>
But specifying it here is not enough. We also need to specify in our CSS.

So in index.css I’m just going to paste in some css. (Index.css: Lines 37-44):

.home-appear {            
  opacity: 0.01;            
}            
                    
.home-appear.home-appear-active {            
  opacity: 1;            
  transition: opacity .5s ease-in;            
}
The class names here have the transitionName home as the prefix.

So we start with an opacity of 0.01 and finish with 1.

We specify the time here as half a second, which needs to be the same as the timeout we specified in the component.

Now let’s test this by reloading the page.

And there we go.
You can see the component fades in slowly instead of appearing at once.

If I navigate to an individual appointment and go back to the homepage, it fades in again.

Next, let’s add a similar transition when we add a new appointment. We want it to fade in when it gets added to the appointments list.

So let’s first import cssTransitionGroup. (AppointmentList.js: Lines 1-4):

import React, { PropTypes } from 'react';            
import Appointment from './Appointment'            
importCSSTransitionGroupfrom'react-transition-group/CSSTransitionGroup';

Then let's wrap appointments in the CSSTransitionGroup. 

And, we'll add a name for the group, transitionName="appointment".

And then we’ll use transitionEnterTimeOut which specifies the transition for an element entering this list. 

And set it to 500 milliseconds. (AppointmentList.js: Lines 6-16):

<div>
  <CSSTransitionGroup
    transitionName="appointment"
    transitionEnterTimeOut={500} >
    {appointments.map(function(appointment) {
      return (
        <Appointment appointment={appointment} key={appointment.id} />
      )
    })}
   </CSSTransitionGroup>
</div>

Then let’s add the css. It will be very similar to the homepage css.

Instead of home-appear, we have appointment-enter. (Index.css: Lines 45-52):

.appointment-enter {
  opacity: 0.01;
}

.appointment-enter.appointment-enter-active {
  opacity: 1;
  transition: opacity 500ms ease-in;
}

Ok now let's try this.

Let's add a new appointment

Enter a title, choose a date and click make appointment.

And there you see the new appointment appears by slowly fading in.

Let’s do one more!

And there we go. 

So that’s how to do some basic transitions and animations with React Transition group.

Liked this tutorial? Get more like this in your inbox