Transition
Animate presence of component with premade animations
Import
Source
Docs
Package
Usage
Transition
component allow you to work with enter/exit animations.
Component comes with premade animations and option to create your own based on CSS properties.
Premade transitions
Mantine includes several premade transitions:
fade
scale
scale-y
scale-x
skew-up
skew-down
rotate-left
rotate-right
slide-down
slide-up
slide-left
slide-right
pop
pop-bottom-left
pop-bottom-right
pop-top-left
pop-top-right
To use one of them set transition
property to one of these values:
Custom transitions
You can create your own transition. transition
is an object with 4 properties:
in
– styles for mounted stateout
– styles for unmounted statecommon
(optional) – styles for both mounted and unmounted statestransitionProperty
– properties which participate in transition
Transition component props
Name | Type | Description |
---|---|---|
children * | (styles: CSSProperties) => ReactElement<any, any> | Render function with transition styles argument |
duration | number | Transition duration in ms |
exitDuration | number | Exit transition duration in ms |
keepMounted | boolean | If set element will not be unmounted from the DOM when it is hidden, display: none styles will be added instead |
mounted * | boolean | When true, component will be mounted |
onEnter | () => void | Calls when enter transition starts |
onEntered | () => void | Calls when enter transition ends |
onExit | () => void | Calls when exit transition starts |
onExited | () => void | Calls when exit transition ends |
timingFunction | string | Transition timing function, defaults to theme.transitionTimingFunction |
transition * | MantineTransition | Predefined transition name or transition styles |