Transition animations can be easily implemented.
Examples
Basic usage
Basic usage
Transition immediately
Transition animation when the component is instantiated
API
type TransitionOptions<T extends Element> = {
onEnter?: TransitionStartHook<T>;
onEntering?: TransitionStartingHook<T>;
onEntered?: TransitionEndHook<T>;
onEnterCancelled?: TransitionCancelledHook<T>;
onExit?: TransitionStartHook<T>;
onExiting?: TransitionStartingHook<T>;
onExited?: TransitionEndHook<T>;
onExitCancelled?: TransitionCancelledHook<T>;
in: boolean;
transitionOnFirst?: boolean;
};
const {show: boolean, nodeRef: Ref} = useTransition(options: TransitionOptions)
Properties
| Property | Description | Type | Default | Require |
|---|---|---|---|---|
| in | Trigger the entering and exiting animation, true means entering, false means exiting | boolean | - | true |
| transitionOnFirst | Whether to trigger the first entry and exit hook function | boolean | false | false |
| onEnter | Before enter hook | (el: Element, transitionOnFirst: boolean) => void | - | |
| onEntering | Enter hook | (el: Element, done: (() => void), transitionOnFirst: boolean, isCancelled: () => boolean) => void | - | false |
| onEntered | After enter hook | (el:Element, transitionOnFirst: boolean) => void | - | false |
| onEnterCancelled | Enter cancelled hook | (el:Element, transitionOnFirst: boolean) => void | - | false |
| onExit | Before exit hook | (el: Element, transitionOnFirst: boolean) => void | - | false |
| onExiting | Exit hook | (el: Element, done: (() => void), transitionOnFirst: boolean, isCancelled: () => boolean) => void | - | false |
| onExited | After exit hook | (el:Element, transitionOnFirst: boolean) => void | - | false |
| onExitCancelled | Exit cancelled hoo | (el: Element, transitionOnFirst: boolean) => void | - | false |
Returns
| Return | Description | Type |
|---|---|---|
| show | Whether the control component is displayed or hidden during the display process | boolean |
| nodeRef | Bind to the element, specify the animation element | boolean |