useCssTransition

Based on useTransition, hooks for css transition animation can be performed more conveniently.

Examples

always in dom

remove when exit

Basic usage

API

type CssTransitionAction = 'appear' | 'enter' | 'exit' | 'disappear';

type CssTransitionClassNameRecord = Partial<
  Record<`${CssTransitionAction}${'Active' | 'From' | 'To'}`, string>
>;

type CssTransitionClassName = CssTransitionClassNameRecord | string;

type CssTransitionTimeoutRecord = Partial<Record<CssTransitionAction, number>>;

type CssTransitionTimeout = CssTransitionTimeoutRecord | number;

const {
    transitionClassesRef,
    // useTransition returns
} = useCssTransition({
    timeout?: CssTransitionTimeout
    disableCss?: boolean
    transitionClassName?: CssTransitionClassName
    // all useTransition Properties
})

Properties

Property	Description	Type	Default	Require
timeout	Customize how long it takes to transition	-	-	false
disableCss	Disable the default control of `css` by the system. After setting, `timeout` will also be invalid, and the completion of the transition animation is controlled by the user	-	-	false
transitionClassName	Configure `className` in transition animation	-	-	false