One of the most frequently overlooked principles of creating interactive UIs is transitions. Fortunately, over the last few years, React.js and other component-focused frameworks have changed the way we think about UIs and how we build them.
React Transition Group allows us to transition these components in and out of the DOM in a declarative and efficient way. In this article, we’ll concentrate on the CSSTransition and TransitionGroup components of React Transition Group using simple examples.
Prerequisites
Before we go any further, this article assumes the following:
- Node.js ≥v6 is installed on your machine
- npm is installed on your machine
- You have a basic understanding of React.js
Getting started
To install, run these commands in the terminal:
https://medium.com/media/738e482f32c270f4ca77b08d99e073bc/href
Transition a React component using CSS with CSSTransition
The CSSTransition component allows us to apply transitions to elements entering and leaving the DOM. We can achieve this by using the following props:
- in: a Boolean value used to control the appearance of the element
- timeout: indicates the number of milliseconds it will take to enter or leave the DOM
- unmountOnExit: indicates that when the element disappears, it’s actually going to leave the DOM completely. Below is a code snippet of what it looks like: https://medium.com/media/f6448a2c30997dbe9896ee9d2db99f69/href
Simple list example
Below is our first example on how to use React Transition Group’s CSSTransition:
Before CSSTransition
CSSTransition component (before transition) - CodeSandbox
After CSSTransition
CSSTransition component (with transition) - CodeSandbox
How the transition was created using CSSTransition
In the first code example, we had a normal component with no transition. This rendered an ordered list as soon as the list button was clicked, with no delay and no extra CSS styling.
But when we decide to give a little more life to this example, we install the react-transition-group while using the tag, and pass the information in this.state.showList as props to in, which enables us to add some transitions using CSS.
The timeout props allows us to apply a transition as the list leaves the DOM. We then head over to style.css to add some styles for the transition. CSSTransition gives us four key classNames to use for elements entering and leaving: enter, enter-active, exit, and exit-active.
https://medium.com/media/0376b6f46981d02cbf2da6221ec28b9b/href
Then, in these CSS classes, we can add some awesome (yet simple) CSS in the classes to make it look like the child component grows out of the button.
https://medium.com/media/f3b512ce07bfede85e413b6787cfc163/href
Note that in the code demo above, you will notice list-transition-enter and list-transition-exit-active have the same values because they are the starting and ending states of the components. However, the transitions only occur when the className is active.
Adding the appear prop to display transition on load
The initial state of the list is set to false. But what if we wanted it to display as the page is mounted to the DOM? We can achieve this by just changing the state of showList to true, but then the transition does not display using the appear prop as shown below:
https://medium.com/media/734a089821efb9f65c21c93e16649cda/href
In the CSS file, the classNames styling for .list-transition-appear would be the same as .list-transition-enter and .list-transition-exit-active since it occurs when the component is mounted, and its only function is to allow the transition to show as it appears.
https://medium.com/media/b81d6fc6a2a5ad5d59f6179c17b1231e/href
Using enter and exit props
Sometimes, if the application requires the transition to be disabled in some part of the component’s transition life cycle, we can do this in the component without editing the CSS or disabling the classNames. We do this using the enter and exit props like so:
https://medium.com/media/0ae7496c8ceca24899236bb0f8d27916/href
This stops the .list-transition-active and .list-transition-enter classes from working.
https://medium.com/media/04dc9818efdc213ccfd539254d4d0907/href
More lifecycle props in CSSTransition groups
We can use lifecycle props to target specific times in transition phases. These lifecycles do exactly what their names imply:
- onEnter: fires when the button is clicked and the operation is engaged
- onEntering: fires when the information is entering the DOM
- onEntered: shows that the information has entered the DOM
- onExit: essentially fires when the operation for the element exit is initiated
- onExiting: fires when the information is exiting the DOM
- onExited: shows that the information has left the DOM
Let’s say we need to highlight the most important activity I like to do. We can highlight the color once the list is rendered and add a delay transition before the highlight. Then, our CSSTransition component becomes:
https://medium.com/media/ffbde4f81840aa01e070292b3fb16dd1/href
The this.listSwitch state is used to set a conditional class to the hobby we want to highlight. So when highlightedHobby is true, we’re going to get this active variant of list item:
https://medium.com/media/77db17c2e882d7bcc9149e9689d34445/href
The conditional className looks like so:
https://medium.com/media/68e31108472bdb9f6ef1b3157ed0463a/href
When it opens, we see Writing JavaScript turn blue after a delay of 500ms, which is 100ms later than the transition of the list-item, and it goes back onExit. Since this occurs so fast, we can’t see it leave; but if you inspect the element using developer tools, you’ll notice it.
Applying Transitions to elements in a list using TransitionGroup and CSSTransition
Using this code example, I will explain its use in creating interesting transitions.
From the code example, we can see that TransitionGroup maps over the favorite music array and returns each one with a CSSTransition component.
https://medium.com/media/14cba0ed9db48b5a62ca5662efdd4d57/href
From the above code example, we can see that the TransitionGroup component renders a component, and we can set this to render anything. It could be UL_,_ div_,_ p_,_ option_,_ etc. But when we do not want to render any component, we can set this to {null}:
Transitions using JSS
We have been using Vanilla CSS to implement our CSS transitions; now, we will refactor our CSS to become JavaScript objects. We will start by creating a styles.js file and turning our styles in objects, like so:
https://medium.com/media/94935eb28ed7ab31d95a69814f4237a9/href
The above code snippet is then imported into our refactor.js as:
import styles from './styles';
The implementation of the styles are done using InjectSheet imported from react-jss:
import injectSheet from 'react-jss';
This gives us the classes props, which we can use to access the styling in style.js, like so:
https://medium.com/media/23e91e54385b986690a9354905fccfcc/href
Note that we use classNames here as opposed to className so we can supply multiple classNames.
The transitions are added by passing an object with enter_,_ enter-active_,_ exit_,_ and enter-active keys, and they’ll refer to JSS class names.
https://medium.com/media/d35206e845e3d69e6383dd436bf66dc2/href
CSSTransition component (using JSS) - CodeSandbox
Conclusion
Smooth transitions make your application’s user experience more dynamic and welcoming to the end user. React Transition Group helps us achieve this with fewer lines of code that are easier to understand. Happy coding!
Plug: LogRocket, a DVR for web apps
LogRocket is a frontend logging tool that lets you replay problems as if they happened in your own browser. Instead of guessing why errors happen, or asking users for screenshots and log dumps, LogRocket lets you replay the session to quickly understand what went wrong. It works perfectly with any app, regardless of framework, and has plugins to log additional context from Redux, Vuex, and @ngrx/store.
In addition to logging Redux actions and state, LogRocket records console logs, JavaScript errors, stacktraces, network requests/responses with headers + bodies, browser metadata, and custom logs. It also instruments the DOM to record the HTML and CSS on the page, recreating pixel-perfect videos of even the most complex single-page apps.
Top comments (0)