v6.0.35

Transition

Animate presence of component with premade animations
Import

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:

import { Transition } from '@asuikit/core';
function Demo({ opened }) {
return (
<Transition mounted={opened} transition="fade" duration={400} timingFunction="ease">
{(styles) => <div style={styles}>Your modal</div>}
</Transition>
);
}

Custom transitions

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
import { useState } from 'react';
import { Transition, Paper, Button, rem } from '@asuikit/core';
import { useClickOutside } from '@asuikit/hooks';
const scaleY = {
in: { opacity: 1, transform: 'scaleY(1)' },
out: { opacity: 0, transform: 'scaleY(0)' },
common: { transformOrigin: 'top' },
transitionProperty: 'transform, opacity',
};
function Demo() {
const [opened, setOpened] = useState(false);
const clickOutsideRef = useClickOutside(() => setOpened(false));
return (
<div
style={{
maxWidth: rem(200),
position: 'relative',
display: 'flex',
justifyContent: 'center',
margin: 'auto',
}}
>
<Button onClick={() => setOpened(true)}>Open dropdown</Button>
<Transition mounted={opened} transition={scaleY} duration={200} timingFunction="ease">
{(styles) => (
<Paper
shadow="md"
style={{ ...styles, position: 'absolute', top: 0, left: 0, right: 0, height: rem(120) }}
ref={clickOutsideRef}
>
Dropdown
</Paper>
)}
</Transition>
</div>
);
}

Transition component props

NameTypeDescription
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