Transition

Animate presence of component with premade animations

Import

Source

View source code

Docs

Edit this page

Package

@mantine/core

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 '@mantine/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 '@mantine/core';
import { useClickOutside } from '@mantine/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>
  );
}

Go back

ScrollArea – @mantine/core

Up next

DatesProvider – @mantine/dates

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

Build fully functional accessible web applications faster than ever

About

Contribute About Mantine Changelog Releases

Community

Chat on Discord Follow on Twitter Follow on GitHub GitHub discussions

Project

Mantine UI Documentation GitHub organization npm organization

Built by Vitaly Rtishchev and these awesome people

Join Discord community

Follow Mantine on Twitter