Eases an element's height when its content swaps, for the pages and cards that open an edit form or a reply box in place.

Functions

f
useHeightTransition<T extends HTMLElement>(watch: unknown): (el: T | null) => (() => void) | undefined

Returns a callback ref for the element whose height eases whenever watch changes, usually the flag that swaps its content. Only the box is animated, so the content that appears should take the animate-in class to fade in. The duration follows --dur-reveal, and nothing moves under prefers-reduced-motion.

Usage

import * as mod from "src/hooks/shared/useHeightTransition.ts";