title: Animations not working when entering (Tailwind, TransitionGroup, Typescript)
body: <p>I've created a wrapper component to supply a list of class names via a string to support Tailwind utility transitions.  This is intended to be nested in a TransitionGroup component to support animations of multiple items, like a list.</p>
  
  <p>I'm able to animate out just fine, but entering is not working.  Can you help me spot the bug in this code, please?</p>
  
  <p>react 16.13.1
  react-transition-group 4.4.1</p>
  
  <p>Sandbox: <a href="https://codesandbox.io/s/delicate-feather-ymozq" rel="nofollow noreferrer">https://codesandbox.io/s/delicate-feather-ymozq</a></p>
  
  <p>(logging in there to watch the div reference in case the classes weren't being applied, but they seem to work fine)</p>
  
  <pre><code>import React, { ReactNode } from "react";
  import { Transition as ReactTransition } from "react-transition-group";
  
  interface TransitionProps {
    in?: boolean;
    timeout: 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&lt;HTMLDivElement&gt;(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) =&gt; s.length);
      return [];
    }
  
    function addClasses(classes: string[]) {
      nodeRef.current?.classList.add(...classes);
    }
  
    function removeClasses(classes: string[]) {
      nodeRef.current?.classList.remove(...classes);
    }
  
    return (
      &lt;ReactTransition
        in={props.in}
        nodeRef={nodeRef}
        timeout={props.timeout}
        unmountOnExit
        onEnter={() =&gt; {
          console.log("onEnter", nodeRef);
          addClasses([...enterClasses, ...enterFromClasses]);
        }}
        onEntering={() =&gt; {
          console.log("onEntering", nodeRef);
          removeClasses(enterFromClasses);
          addClasses(enterToClasses);
        }}
        onEntered={() =&gt; {
          console.log("onEntered", nodeRef);
          removeClasses([...enterToClasses, ...enterClasses]);
        }}
        onExit={() =&gt; {
          console.log("onExit", nodeRef);
          addClasses([...leaveClasses, ...leaveFromClasses]);
        }}
        onExiting={() =&gt; {
          console.log("onExiting", nodeRef);
          removeClasses(leaveFromClasses);
          addClasses(leaveToClasses);
        }}
        onExited={() =&gt; {
          console.log("onExited", nodeRef);
          removeClasses([...leaveToClasses, ...leaveClasses]);
        }}
      &gt;
        &lt;div ref={nodeRef}&gt;{props.children}&lt;/div&gt;
      &lt;/ReactTransition&gt;
    );
  }
  </code></pre>