Enter and Exit Animations Without a Library

When you conditionally render with {show && }, React removes the element from the DOM the instant show becomes false. There is no time for an exit animation because the node is already gone.

Enter animations are easy; exit animations are the real challenge.

The simplest fix is to never unmount. Keep the element rendered and animate opacity to zero plus pointer-events: none when hidden, and back to one when shown.

This gives smooth fades in both directions, at the cost of the element staying in the DOM.

For true unmounting you model a small state machine with phases like mounting, mounted, unmounting, and unmounted. You only remove the node once the exit animation has finished.

State drives which animation classes apply at each phase.

You can encapsulate the machine in a custom hook, often called useMount. It takes the desired visibility and returns whether the element should be in the DOM plus its current phase.

Components stay clean because the timing logic lives in the reusable hook.

Borrowing from common conventions, you apply enter then enter-active on mount, and exit then exit-active on removal. The base class sets the start state and the active class sets the end state with a transition.

Toggling between the two on the right frame produces the animation.

To know when an exit animation finishes, listen for the transitionend event on the element. When it fires for the exit, you flip the state to unmounted and remove the node.

This ties the unmount precisely to the end of the visual animation rather than a guessed timeout.

You can wrap all of this in a Transition component that accepts an in prop and children. It keeps children mounted through their exit animation and applies the proper classes per phase.

Consumers just toggle in and get correct enter and exit motion for free.

A subtle detail: you must let the browser paint the start class before adding the active class, otherwise it jumps with no transition. A requestAnimationFrame or forced reflow between the two ensures the transition actually runs.

This guarantees the browser registers the start values first.

The library react-transition-group provides Transition and CSSTransition components that implement exactly this pattern, including the class lifecycle and unmount timing.

Your DIY version mirrors its core ideas, which makes the library easy to understand once you have built one yourself.

For a single simple fade, the keep-mounted approach or a small hook is plenty and avoids a dependency. For many coordinated transitions, lists with add and remove, or complex sequencing, a library saves time and edge-case bugs.

Choose based on how much animation complexity your app actually needs.

Exit animations require keeping the element alive until its animation completes, whether by never unmounting, by a state machine plus transitionend, or by a library.

Understanding the mechanics lets you pick the lightest approach that meets your needs.

Test your understanding of exit animations.

You learned why exit animations are hard, two solutions (keep-mounted and a mounting state machine), how transitionend times the unmount, and how to build a reusable Transition component.

You also saw when to reach for react-transition-group instead of DIY.