Enter and Exit

:root {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --duration-2: 200ms;
}

/* Markup: <div class="toast" data-state="closed">…<button>Dismiss</button></div>.
   Kept mounted rather than display + @starting-style, which also plays on
   first paint. Show: data-state="open". Dismiss: data-state="closing",
   then data-state="closed" on its own transitionend (event.target the toast,
   propertyName "opacity"), the enter origin, so the next show starts from 16px below.
   Focus inside the toast: trigger.focus({ preventScroll: true }) before
   closing, or it drops to body. */
.toast {
  /* The base rule is the exit target, so it times the exit (a transition takes
     the duration of the state it heads to). visibility is transitioned too,
     so the toast is hidden from the tab order only once the exit ends. */
  opacity: 0;
  transform: translateY(4px);
  visibility: hidden;
  transition-property: opacity, transform, visibility;
  transition-duration: 150ms; /* 0.75 × the enter */
  transition-timing-function: var(--ease-out);
}
.toast[data-state="closed"] {
  /* The enter origin, reached in no time, so a show right after the exit
     starts from the full travel. */
  transform: translateY(16px);
  transition-duration: 0ms;
}
.toast[data-state="open"] {
  opacity: 1;
  transform: none;
  visibility: visible;
  transition-duration: var(--duration-2);
}

/* Reduced motion: a fade over the same durations, no travel. */
@media (prefers-reduced-motion: reduce) {
  .toast,
  .toast[data-state] {
    transform: none;
  }
}

import { AnimatePresence, motion, useReducedMotion } from 'motion/react'
import type { ReactNode, RefObject } from 'react'

const ease = [0.23, 1, 0.32, 1] as const

type Props = { open: boolean; onDismiss: () => void; trigger: RefObject<HTMLButtonElement | null>; children: ReactNode }

export function Toast({ open, onDismiss, trigger, children }: Props) {
  // Reduced motion: a fade over the same durations, no travel.
  const reduced = useReducedMotion()
  const y = (px: number) => (reduced ? 0 : px)
  return (
    // initial={false}: a toast open at first paint gets no entrance.
    <AnimatePresence initial={false}>
      {open && (
        <motion.div
          className="toast"
          initial={{ opacity: 0, y: y(16) }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.2, ease }}
          // Exits are quieter: a few pixels toward the edge it came from, 0.75 × the enter.
          exit={{ opacity: 0, y: y(4), transition: { duration: 0.15, ease } }}
        >
          {children}
          {/* Focus goes back to the trigger first, or it drops to body when the toast unmounts. */}
          <button
            type="button"
            onClick={() => {
              trigger.current?.focus({ preventScroll: true })
              onDismiss()
            }}
          >
            Dismiss
          </button>
        </motion.div>
      )}
    </AnimatePresence>
  )
}