Overlays@knitui/components

Transition

Transition drives single-child mount/unmount animations via a render prop. It mirrors Mantine's Transition API: the mounted prop controls visibility, transition selects the preset, and the render prop receives computed style that the child spreads onto any element. Respects the user's reduced-motion preference.

WebiOSAndroidnative split13 own props6 examples

Stories Source Tests Native source Open in Storybook

import { Transition } from "@knitui/components";

Playground

Loading playground…

mountedWhether the child should be visible/mounted.

true

transitionTransition preset name (or a custom style object).

durationEnter transition duration in ms.

exitDurationExit transition duration in ms (defaults to `duration`).

timingFunctionCSS transition timing function.

keepMountedWhen true the child stays in the DOM with `display:none` after exiting rather than being unmounted.

false

enterDelayDelay in ms before the enter transition starts.

exitDelayDelay in ms before the exit transition starts.

Playground

<Transition
  mounted
  transition="fade"
  duration={250}
  timingFunction="ease"
  keepMounted={false}
/>

Examples

Controlled

Toggle mounted on and off to watch the animation play.

Loading example…

ControlledSource Storybook

All Presets

Every built-in transition preset side by side — click Show/Hide to compare.

Loading example…

All PresetsSource Storybook

Keep Mounted

keepMounted keeps the child in the DOM (display:none) instead of unmounting it.

Loading example…

Keep MountedSource Storybook

With Delays

Enter and exit delays let you stagger reveals — useful for sequential animations.

Loading example…

With DelaysSource Storybook

Slow Motion

Slow duration makes it easy to observe the transition in detail.

Loading example…

Slow MotionSource Storybook

Props

Prop	Type	Default	Description
`children` required	`(styles: TransitionStyle) => ReactElement`	—	Render function that receives the computed transition styles.
`mounted` required	`boolean`	`true`	Whether the child should be visible/mounted.
`duration`	`number \| undefined`	`250`	Enter transition duration in ms.
`enterDelay`	`number \| undefined`	—	Delay in ms before the enter transition starts.
`exitDelay`	`number \| undefined`	—	Delay in ms before the exit transition starts.
`exitDuration`	`number \| undefined`	`duration`	Exit transition duration in ms (defaults to `duration`).
`keepMounted`	`boolean \| undefined`	`false`	When true the child stays in the DOM with `display:none` after exiting rather than being unmounted.
`onEnter`	`(() => void) \| undefined`	—	Called when the enter transition starts.
`onEntered`	`(() => void) \| undefined`	—	Called when the enter transition ends.
`onExit`	`(() => void) \| undefined`	—	Called when the exit transition starts.
`onExited`	`(() => void) \| undefined`	—	Called when the exit transition ends.
`timingFunction`	`string \| undefined` ease · ease-in · ease-out · ease-in-out · linear	`"ease"`	CSS transition timing function.
`transition`	`MantineTransition \| undefined` fade · fade-up · fade-down · fade-left · fade-right · scale · scale-y · scale-x · skew-up · skew-down · rotate-left · rotate-right · slide-down · slide-up · slide-left · slide-right · pop · pop-top-left · pop-top-right · pop-bottom-left · pop-bottom-right	`"fade"`	Transition preset name (or a custom style object).