Add Animation with the React Transition Group Library

With the react-spring library, we can render animations in our React app easily.

In this article, we’ll take a look at how to get started with the React Transition Group.

Getting Started

We can install the library by running:

npm install react-transition-group --save

with NPM or:

yarn add react-transition-group

with Yarn.

Transition

We can add transitions by using the Transition component.

For example, we can write:

import React, { useState } from "react";
import { Transition } from "react-transition-group";

const duration = 300;

const defaultStyle = {
  transition: `opacity ${duration}ms ease-in-out`,
  opacity: 0
};

const transitionStyles = {
  entering: { opacity: 1 },
  entered: { opacity: 1 },
  exiting: { opacity: 0 },
  exited: { opacity: 0 }
};

const Fade = ({ in: inProp }) => (
  <Transition in={inProp} timeout={duration}>
    {(state) => (
      <div
        style={{
          ...defaultStyle,
          ...transitionStyles[state]
        }}
      >
        I'm a fade Transition!
      </div>
    )}
  </Transition>
);

export default function App() {
  const [show, setShow] = useState(false);

  return (
    <div className="App">
      <button onClick={() => setShow(!show)}>toggle</button>
      <Fade in={show} />
    </div>
  );
}

We create the Fade component with the Transition component inside it to create the transition.

We set the defaultStyle to set the default style.

Then transitionStyles has the styles to add based on the transition state.

The 2 styles together lets us apply the styles dynamically for to create the fade transition.

In the App component, we have the button to toggle the show state.

Then in the Fade transition, we pass the show state as the value of the in prop to show the enter transition when show is true .

The timeout sets the duration of the transition.

Now when we click on the toggle button, we see the item text toggled with the fade transition.

CSSTransition

The CSSTransition component lets us animate components with external CSS.

For example, we can write:

App.js

import React, { useState } from "react";
import { CSSTransition } from "react-transition-group";
import "./styles.css";

export default function App() {
  const [show, setShow] = useState(false);

  return (
    <div className="App">
      <button type="button" onClick={() => setShow(!show)}>
        toggle
      </button>
      <CSSTransition in={show} timeout={200} classNames="my-node">
        <div>I'll receive my-node-* classes</div>
      </CSSTransition>
    </div>
  );
}

styles.css

.my-node-enter {
  opacity: 0;
}
.my-node-enter-active {
  opacity: 1;
  transition: opacity 200ms;
}
.my-node-exit {
  opacity: 1;
}
.my-node-exit-active {
  opacity: 0;
  transition: opacity 200ms;
}

We have the show state again.

And we add the styles for each stage of the transition with the styles.css file.

The CSSTransition component takes the in prop as it does with the Transition component.

timeout has the duration of the transition duration.

classNames has the class name prefix for the transition.

Now when we click on the toggle button, we see the item text flash.

Conclusion

We can add transition effects easily with the React Transition Group library.