Animate presence of component with premade animations
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.
Mantine includes several premade transitions:
To use one of them set
transition property to one of these values:
You can create your own transition. Transition is an object with 4 properties:
in– styles for mounted state
out– styles for unmounted state
common(optional) – styles for both mounted and unmounted states
transitionProperty– properties which participate in transition
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.