A CSS Transition component to use as a child of TransitionGroup.

CSSTransition.tsx

// http://reactcommunity.org/react-transition-group/transition
// http://reactcommunity.org/react-transition-group/transition-group

import React, { ReactNode } from "react";
import { Transition as ReactTransition } from "react-transition-group";

interface TransitionProps {
  in?: boolean;
  timeout: number | { appear?: number; enter?: number; exit?: number };
  enter?: string;
  enterFrom?: string;
  enterTo?: string;
  leave?: string;
  leaveFrom?: string;
  leaveTo?: string;
  children: ReactNode;
}

export function CSSTransition(props: TransitionProps) {
  const { enter, enterFrom, enterTo, leave, leaveFrom, leaveTo } = props;
  const nodeRef = React.useRef<HTMLDivElement>(null);

  const enterClasses = splitClasses(enter);
  const enterFromClasses = splitClasses(enterFrom);
  const enterToClasses = splitClasses(enterTo);
  const leaveClasses = splitClasses(leave);
  const leaveFromClasses = splitClasses(leaveFrom);
  const leaveToClasses = splitClasses(leaveTo);

  function splitClasses(string: string | undefined): string[] {
    if (string) return string.split(" ").filter((s) => s.length);
    return [];
  }

  function addClasses(classes: string[]) {
    nodeRef.current?.classList.add(...classes);
  }

  function removeClasses(classes: string[]) {
    nodeRef.current?.classList.remove(...classes);
  }

  return (
    <ReactTransition
      in={props.in}
      nodeRef={nodeRef}
      unmountOnExit
      timeout={props.timeout}
      onEnter={() => {
        addClasses([...enterClasses, ...enterFromClasses]);
      }}
      onEntering={() => {
        removeClasses(enterFromClasses);
        addClasses(enterToClasses);
      }}
      onEntered={() => {
        removeClasses([...enterToClasses, ...enterClasses]);
      }}
      onExit={() => {
        addClasses([...leaveClasses, ...leaveFromClasses]);
      }}
      onExiting={() => {
        removeClasses(leaveFromClasses);
        addClasses(leaveToClasses);
      }}
      onExited={() => {
        removeClasses([...leaveToClasses, ...leaveClasses]);
      }}
    >
      <div ref={nodeRef}>{props.children}</div>
    </ReactTransition>
  );
}