Transition
Animate presence of component with premade animations
Import
Source
Docs
Package
Usage
Transition
and GroupedTransition
components allow you to work with enter/exit animations.
Components come 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
GroupedTransition
Use GroupedTransition
if you need to animate presence of more that one element at the same time but with different transitions.
For example, in Modal component overlay and modal body animated differently:
modal body slides from the top and overlay fades.
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 |
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 |