Transitions

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

    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 } from '@chakra-ui/react'

    Usage#

    Chakra exports four components Fade, ScaleFade, Slide, and SlideFade 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>
        </>
      )
    }
    Edit this page on GitHub