I'm trying to use React's TransitionGroup and Transition elements to implement the basic case of having my elements 'animate' in and out. I'm confused about the proper way to utilize the Entering, Entered, Exiting, Exited state as well as additional concerns like unmountOnExit (which seems to prevent Exited state from being reached).

I'm using these styles right now:

.Test {
    transition: background-color 1000ms ease-in-out;
    background-color: white;
}

.entering {
    background-color: white;    
}

.entered {
    background-color: purple;
}


.exiting {
    background-color: purple;
}

.exited {
    background-color: white;
}

That are applied to a div like so:

<Transition unmountOnExit={true} in={this.props.in} timeout={1000}>
                {state => {
                    console.log(this.props.name);
                    console.log(state);
                    return (
                        <div className={`Test ${state}`}>
                            {this.props.name}
                        </div>
                    );
                }}
</Transition>

What happens is the div appears with a white background (waits for timeout amount of time) then fades to purple. If I delete this div, it waits timeout (doing nothing) and then instantly disappears.

I'm confused with the number of possible state combinations in this API. exiting, timeout, unmountOnExit, the CSS classes and how the animations are applied. etc..

Question

So I guess my question is (and i can provide more of my code if more context is needed) how can I simply implement something like "fade in, fade out", where the component's addition to the DOM and removal (hopefully corresponding to React's componentDidMount componentWillUnmount?) will line up with sensible animations.

One approach I took was to set the timeout prop to 0. That made it so that I could set Entering and Entered to background-color: purple and since the initial state was Exited (which i set to background-color: white it would "fade in" (to purple) on mount. But then the problem is that since timeout is 0, the reverse Transition states (which I guess was entered -> exiting -> exited) happened instantaneously and then the component is unmounted. So you don't even see the "fade out" portion of the transition.