react-transition-group

In v2, <TransitionGroup> no longer manages transitions via static lifecycle methods on its children. Instead, <TransitionGroup> injects transition-specific props into its children, which must be passed through to a <Transition> component (or <CSSTransition>) for the animation to function.

When creating custom wrapper components for transitions, ensure you spread the incoming props onto the <Transition> component.

const MyTransition = ({ children: child, ...props }) => (
  // The spread (...props) is required to pass injected props from TransitionGroup to Transition
  <Transition {...props}>
    {transitionState => React.cloneElement(child, {
      style: getStyleForTransitionState(transitionState)
    })}
  </Transition>
);

const MyList = () => (
  <TransitionGroup>
    {items.map(item => (
      <MyTransition key={item.id}>{item}</MyTransition>
    ))}
  </TransitionGroup>
);

When migrating from react-transition-group v1 to v2, note the following prop and component changes:

• Replace <CSSTransitionGroup> with a combination of <TransitionGroup> and <CSSTransition>.
• transitionName becomes classNames.
• transitionEnterTimeout and transitionLeaveTimeout are replaced by a single timeout prop, which accepts an object: timeout={{ enter, exit }}. If both values are the same, you can use the shorthand timeout={number}.
• transitionAppear becomes appear.
• transitionEnter becomes enter.
• transitionLeave becomes exit (v2 uses "exit" instead of "leave" for symmetry).

CSS Class Changes: Because leave was renamed to exit, you must update your CSS selectors from .example-leave and .example-leave-active to .example-exit and .example-exit-active respectively.

- transitionName="example"
- transitionEnterTimeout={500}
- transitionLeaveTimeout={300}
+ classNames="example"
+ timeout={{ enter: 500, exit: 300 }}

The CSSTransition component manages CSS transitions or animations by applying a pair of class names during the appear, enter, and exit states. It applies a base class (e.g., fade-enter), then an *-active class (e.g., fade-enter-active) to trigger the transition, and finally a *-done class (e.g., fade-enter-done) to persist the state.

To use CSSTransition, provide a nodeRef to the component and pass that same ref to the child element you wish to animate. This is required to avoid using findDOMNode in Strict Mode.

CSS Implementation Pattern: Apply the transition property only to the *-active classes. The base classes (like *-enter or *-exit) should define the starting styles.

function App() {
  const [inProp, setInProp] = useState(false);
  const nodeRef = useRef(null);
  return (
    <div>
      <CSSTransition nodeRef={nodeRef} in={inProp} timeout={200} classNames="my-node">
        <div ref={nodeRef}>
          {"I'll receive my-node-* classes"}
        </div>
      </CSSTransition>
      <button type="button" onClick={() => setInProp(true)}>
        Click to Enter
      </button>
    </div>
  );
}

The SwitchTransition component allows you to control the order in which elements transition during a state change. It is useful when you want to ensure one element has finished its exit animation before the next one begins its entry animation, or vice versa.

Modes:

• out-in (default): The current element transitions out first. Once the exit is complete, the new element transitions in.
• in-out: The new element transitions in first. Once the entry is complete, the current element transitions out.

Note: If you want animations to happen simultaneously (old child removed and new child inserted at the same time), use TransitionGroup instead.

Requirements:

• The children must be a Transition or CSSTransition component.
• The child component must have a unique key prop so SwitchTransition can detect when the state has changed.

function App() {
  const [state, setState] = useState(false);
  const helloRef = useRef(null);
  const goodbyeRef = useRef(null);
  const nodeRef = state ? goodbyeRef : helloRef;

  return (
    <SwitchTransition mode="out-in">
      <CSSTransition
        key={state ? "Goodbye, world!" : "Hello, world!"}
        nodeRef={nodeRef}
        addEndListener={(node, done) => node.addEventListener("transitionend", done, false)}
        classNames='fade'
      >
        <button ref={nodeRef} onClick={() => setState(state => !state)}>
          {state ? "Goodbye, world!" : "Hello, world!"}
        </button>
      </CSSTransition>
    </SwitchTransition>
  );
}

The Transition component allows you to describe transitions between component states over time using a declarative API. It tracks 'enter' and 'exit' states, which you can use to apply styles or trigger logic.

Note: Transition is platform-agnostic. If you are using CSS transitions, use CSSTransition instead, as it provides additional features specifically for CSS.

Transition supports two types of children:

1. A function child: Receives the current transition status ('entering', 'entered', 'exiting', or 'exited') as an argument. This is useful for applying state-specific props or classes.
2. A React element: The component will receive the transition props automatically via React.cloneElement.

import { Transition } from 'react-transition-group';
import { useRef } from 'react';

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 },
};

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

The CSSTransition component provides several lifecycle callbacks that fire during different stages of the transition.

Note on arguments: When the nodeRef prop is provided, the first argument passed to these callbacks is isAppearing (boolean) instead of the node (HTMLElement). If nodeRef is NOT provided, the first argument is the node.