Published on | Prototyping: From UX to Front End — Medium Ben Coleman

Adding and removing components from the view is going to be something that happens often while creating most any single page application. React has made it easy for us as developers to make that happen, but one extra step is signaling to user when the state of the application is changing based on their inputs. Animations can be a great way to enhance the user interface and to send subtle messaging about the changes being made.

ReactCSSTransitionGroup and ReactTransitionGroup are React addons that give us the capability to easily apply animations throughout the lifecycle on your components. We’ll be talking about ReactCSSTransitionGroup here, but ReactTransitionGroup is similar but gives us a high level API that will use Javascript to run the animations and take a callback after the animation is run instead of relying on the ‘transition end’ event.

https://www.uber.design/ using ReactCSSTransition groups to make a better scroll

Our App.js setup is below. We’ll be creating a todo list and then we’ll have a button that will display or remove a box component . We aren’t getting to the transitions yet, just setting the stage.

<a href="https://medium.com/media/829a660550dd7f75619183d5f10874f8/href">https://medium.com/media/829a660550dd7f75619183d5f10874f8/href</a>

Next step will be adding the addon package to our project.

npm install react-addons-css-transition-group --save

or

yarn add react-addons-css-transition-group

Creating our TodoList component will need to now import our addon and then we’ll be using the ReactCSSTransitionGroup component to wrap our rending of all of our contained and therefore animated components.

<a href="https://medium.com/media/612caa24652d177d9b230f5a1951047c/href">https://medium.com/media/612caa24652d177d9b230f5a1951047c/href</a>

ReactCSSTransitionGroup sends a few important props to let our program know how it to deal with the transition. We tell the ReactCSSTransitionGroup what is the name of the transition that it will be using to enter and exit all of the child elements that will be created and destroyed. By referencing the fade transition, we get access to a few important CSS selectors that allow us to write our desired transition animation.

<a href="https://medium.com/media/12247fd0f03c51c4cda14b8535952ee5/href">https://medium.com/media/12247fd0f03c51c4cda14b8535952ee5/href</a>

fade-enter and fade-enter-active

If a new item is added within our ReactCSSTransitionGroup it will receive the fade-enter CSS class and next the fade-enter-active CSS class added in the next tick. We want to the opacity to be set at 0 when the component is added to the DOM and then it will transition to opacity: 1 over the duration of our transition. It’s important to note that the transition timing (500ms in our case), needs to be set to the same value within both the CSS and as a prop to ReactCSSTransitionGroup. We use the React prop to indicate when it is alright to change the class on our elements and then to remove/add the component after the duration. So lets see our fade animation in action.

Lovely. By wrapping all of our TodoListItems in the ReactCSSTransitionGroup our defined transitions will be applied whenever a new component is added, but only to the component that is being changed.

fade-leave and fade-leave-active

The syntax for when a component is being deleted is very similar to our entering CSS, but it does give us a chance to change the behavior. We’ll speed up our exit transition to be a little quicker than our enter by changing the transition duration in the CSS and the transitionLeaveTimeout to 300ms. If you’re not a fan of the default names on selectors, you’re free to create your own like this:

<ReactCSSTransitionGroup   
  transitionName={
    {     enter: 'enter',     
          leave: 'leave',     
          appear: 'appear'   
    } 
}>

Transition on component leaving the DOM

Using ReactCSSTransitionGroup we’re able to define any CSS transition we want on both the enter and exit. Instead of just working with our opacity lets try defining a new transition prop on our ReactCSSTransitionGroup component and include just a single element instead of a list of elements.

<a href="https://medium.com/media/553e6d2fc1e0cad3fa09d1f6c7ba4504/href">https://medium.com/media/553e6d2fc1e0cad3fa09d1f6c7ba4504/href</a>

Instead of just animating one property, we can transition multiple CSS properties and change how our component enters and exits. Here is our spicy result.

Our component transitions can become more interactive and powerful once we step away from ReactCSSTransitionGroup and step into the ReactTransitionGroup using callback functions to animate, but using the CSS transitions is an easy and performant way to improve your user experience and add some flavor to your application.

Further Reading

Using ReactCSSTransitionGroup for enter/exit animations was originally published in prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

Using ReactCSSTransitionGroup for enter/exit animations

Cool stuff, every week

More Articles