Transitions

Chakra exports five components `Fade`, `ScaleFade`, `Slide`, `SlideFade` and `Collapse` to provide simple transitions.

    Source@chakra-ui/transition

Import#

Most transition components are made using framer-motion. They accept the following props:

  • Common props from framer's motion elements
  • in prop used to trigger the transition
  • unmountOnExit prop used to unmount the component when it is not visible.
import { Fade, ScaleFade, Slide, SlideFade, Collapse } from '@chakra-ui/react'

Usage#

Chakra exports five components Fade, ScaleFade, Slide, SlideFade and Collapse to provide simple transitions.

Fade transition#

function FadeEx() {
const { isOpen, onToggle } = useDisclosure()
return (
<>
<Button onClick={onToggle}>Click Me</Button>
<Fade in={isOpen}>
<Box
p='40px'
color='white'
mt='4'
bg='teal.500'
rounded='md'
shadow='md'
>
Fade
</Box>
</Fade>
</>
)
}

ScaleFade transition#

function ScaleFadeEx() {
const { isOpen, onToggle } = useDisclosure()
return (
<>
<Button onClick={onToggle}>Click Me</Button>
<ScaleFade initialScale={0.9} in={isOpen}>
<Box
p='40px'
color='white'
mt='4'
bg='teal.500'
rounded='md'
shadow='md'
>
Fade
</Box>
</ScaleFade>
</>
)
}

Slide transition#

function SlideEx() {
const { isOpen, onToggle } = useDisclosure()
return (
<>
<Button onClick={onToggle}>Click Me</Button>
<Slide direction='bottom' in={isOpen} style={{ zIndex: 10 }}>
<Box
p='40px'
color='white'
mt='4'
bg='teal.500'
rounded='md'
shadow='md'
>
<Lorem count={2} />
</Box>
</Slide>
</>
)
}

Slide Fade transition#

function SlideFadeEx() {
const { isOpen, onToggle } = useDisclosure()
return (
<>
<Button onClick={onToggle}>Click Me</Button>
<SlideFade in={isOpen} offsetY='20px'>
<Box
p='40px'
color='white'
mt='4'
bg='teal.500'
rounded='md'
shadow='md'
>
<Lorem count={1} />
</Box>
</SlideFade>
</>
)
}

Collapse transition#

The Collapse component is used to create regions of content that can expand/collapse with a simple animation. It helps to hide content that's not immediately relevant to the user.

function CollapseEx() {
const { isOpen, onToggle } = useDisclosure()
return (
<>
<Button onClick={onToggle}>Click Me</Button>
<Collapse in={isOpen} animateOpacity>
<Box
p='40px'
color='white'
mt='4'
bg='teal.500'
rounded='md'
shadow='md'
>
<Lorem count={1} />
</Box>
</Collapse>
</>
)
}

Changing the startingHeight#

function Example() {
const [show, setShow] = React.useState(false)
const handleToggle = () => setShow(!show)
return (
<>
<Collapse startingHeight={20} in={show}>
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus
terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer
labore wes anderson cred nesciunt sapiente ea proident.
</Collapse>
<Button size='sm' onClick={handleToggle} mt='1rem'>
Show {show ? 'Less' : 'More'}
</Button>
</>
)
}

Changing transitions manually using motion props#

function CollapseEx() {
const { isOpen, onToggle } = useDisclosure()
return (
<>
<Button onClick={onToggle}>Click Me</Button>
<Collapse
in={isOpen}
transition={{ exit: { delay: 1 }, enter: { duration: 0.5 } }}
>
<Box
p='40px'
color='white'
mt='4'
bg='teal.500'
rounded='md'
shadow='md'
>
<Lorem count={1} />
</Box>
</Collapse>
</>
)
}
Edit this page on GitHub

Proudly made inNigeria by Segun Adebayo

Deployed by â–² Vercel