Enter/exit transition
Animating an element as it appears and, the hard half, keeping it alive long enough to animate before it is removed.
See it
What it is
An enter/exit transition animates an element on the way in and on the way out. The enter half is easy: the element exists, so you animate it. The exit half is the one everybody gets stuck on, because by the time you want to animate the element it has already been deleted. Modals, toasts, dropdowns, and route changes all hit this: they fade in nicely and then vanish with a hard cut.
The fix is always the same shape: something has to keep the element alive until its exit animation finishes. In React that is Framer Motion's 'AnimatePresence' or a manual 'exiting' state you clear on 'transitionend'. In modern CSS you can do it natively: '@starting-style' gives the element a from-state on first paint, and 'transition-behavior: allow-discrete' lets 'display' and 'overlay' hold on through the transition so popovers and dialogs can animate closed.
Gotchas: make exit shorter than enter (roughly 150ms out versus 250ms in), because a slow goodbye feels like lag. Set 'pointer-events: none' on the exiting copy so it does not eat clicks on its way out. And decide what happens when the user reopens mid-exit: the good answer is to reverse from the current position, not to queue a second animation.
Ask AI for it
Give this component both an enter and an exit transition. On mount, fade from opacity 0 and scale 0.96 to full over 250ms ease-out. On dismiss, delay the actual removal until an exit animation finishes: fade to opacity 0 and scale 0.98 over 150ms ease-in, then unmount. Use AnimatePresence in React, or plain CSS with @starting-style plus transition-behavior: allow-discrete on display. Set pointer-events: none while exiting, and make a reopen reverse the exit rather than queue behind it.