React Transition Group

In this tutorial, you will learn how to use React Transition Group to create smooth and engaging animations in your React applications.

Installing React Transition Group

First, install React Transition Group using npm:

npm install react-transition-group

Using the CSSTransition Component

CSSTransition is a component provided by React Transition Group to handle the entering and exiting of elements with CSS animations.

CSS

.fade {
  opacity: 0;
  transition: opacity 0.5s ease;
}

.fade-enter {
  opacity: 0;
}

.fade-enter-active {
  opacity: 1;
}

.fade-exit {
  opacity: 1;
}

.fade-exit-active {
  opacity: 0;
}

JavaScript

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

const FadeToggle = () => {
  const [show, setShow] = useState(false);

  const toggle = () => {
    setShow(!show);
  };

  return (
    <div>
      <button onClick={toggle}>Toggle</button>
      <CSSTransition in={show} timeout={500} classNames="fade" unmountOnExit>
        <div>Hello, world!</div>
      </CSSTransition>
    </div>
  );
};

export default FadeToggle;

In this example, we use the CSSTransition component to create a fade-in and fade-out effect when clicking the "Toggle" button. The in prop determines whether the element is entering or exiting. The timeout prop sets the duration of the transition, and the classNames prop specifies the CSS classes to apply during the transition.

Using the TransitionGroup Component

TransitionGroup is another component provided by React Transition Group, which allows you to manage a collection of CSSTransition components:

CSS

.item {
  opacity: 1;
  transition: opacity 0.5s ease;
}

.item-enter {
  opacity: 0;
}

.item-enter-active {
  opacity: 1;
}

.item-exit {
  opacity: 1;
}

.item-exit-active {
  opacity: 0;
}

JavaScript

import React, { useState } from 'react';
import { TransitionGroup, CSSTransition } from 'react-transition-group';
import './Items.css';

const Items = () => {
  const [items, setItems] = useState([]);

  const addItem = () => {
    setItems([...items, { id: Date.now() }]);
  };

  const removeItem = id => {
    setItems(items.filter(item => item.id !== id));
  };

  return (
    <div>
      <button onClick={addItem}>Add Item</button>
      <TransitionGroup>
        {items.map(item => (
          <CSSTransition key={item.id} timeout={500} classNames="item">
            <div className="item" onClick={() => removeItem(item.id)}>
              {item.id}
            </div>
          </CSSTransition>
        ))}
      </TransitionGroup>
    </div>
  );
};

export default Items;

In this example, we use the TransitionGroup component to manage a list of items. When adding or removing items, the elements will smoothly fade in and out.

Now you know how to use React Transition Group to create smooth and engaging animations in your React applications. By combining CSSTransition and TransitionGroup, you can create more complex animations and enhance the user experience.

Remember, the key to successful animations is to keep them subtle and smooth, avoiding distractions or disruptions to the user experience.

Using the SwitchTransition Component

SwitchTransition is another component provided by React Transition Group, which helps you handle transitions between two elements that appear and disappear simultaneously.

CSS

.slide {
  position: absolute;
  width: 100%;
  transition: transform 0.5s ease;
}

.slide-enter {
  transform: translateY(100%);
}

.slide-enter-active {
  transform: translateY(0%);
}

.slide-exit {
  transform: translateY(0%);
}

.slide-exit-active {
  transform: translateY(-100%);
}

JavaScript

import React, { useState } from 'react';
import { SwitchTransition, CSSTransition } from 'react-transition-group';
import './SlideToggle.css';

const SlideToggle = () => {
  const [show, setShow] = useState(false);

  const toggle = () => {
    setShow(!show);
  };

  return (
    <div>
      <button onClick={toggle}>Toggle</button>
      <SwitchTransition>
        <CSSTransition key={show ? 'on' : 'off'} timeout={500} classNames="slide">
          {show ? <div>On</div> : <div>Off</div>}
        </CSSTransition>
      </SwitchTransition>
    </div>
  );
};

export default SlideToggle;

In this example, we use the SwitchTransition component to create a slide-in and slide-out effect when toggling between "On" and "Off" states. When one element enters, the other exits, creating a seamless transition.

Conclusion

That's it! You now have a good understanding of how to use React Transition Group to create engaging and smooth animations in your React applications. By combining various components like CSSTransition, TransitionGroup, and SwitchTransition, you can create a wide variety of animations that enhance the user experience. Happy coding!