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