Transitions

function FadeTransitionExample() {
  const { isOpen, onToggle } = useDisclosure()
  return (
    <>
      <Button onClick={onToggle}>Click Me</Button>
      <Fade timeout={150} in={isOpen}>
        {(styles) => (
         <Box style={styles}>
            <Lorem count={1} />
         </Box>
        )}
      </Fade>
    </>
  )
}

function ScaleFadeTransitionExample() {
  const { isOpen, onToggle } = useDisclosure()
  return (
    <>
      <Button onClick={onToggle}>Click Me</Button>
      <ScaleFade initialScale={0.9} timeout={150} in={isOpen}>
        {(styles) => (
         <Box style={styles}>
            <Lorem count={1} />
         </Box>
        )}
      </ScaleFade>
    </>
  )
}

function SlideTransitionExample() {
  const { isOpen, onToggle } = useDisclosure()
  return (
    <>
      <Button onClick={onToggle}>Click Me</Button>
      <Slide placement="bottom" timeout={150} in={isOpen}>
        {(styles) => (
         <Box style={{...styles, position: "static"}}>
            <Lorem count={2} />
         </Box>
        )}
      </Slide>
    </>
  )
}

function SlideFadeTransitionExample() {
  const { isOpen, onOpen, onClose } = useDisclosure()
  return (
    <>
      <Button onClick={onOpen}>Open Modal</Button>
      <Modal isOpen={isOpen} onClose={onClose}>
        <ModalOverlay>
          <SlideFade initialOffset="20px" timeout={150} in={isOpen}>
            {(styles) => (
              <ModalContent style={styles}>
                <ModalHeader>Modal Title</ModalHeader>
                <ModalCloseButton />
                <ModalBody>
                  <Lorem count={2} />
                </ModalBody>
                <ModalFooter>
                  <Button colorScheme="blue" mr={3} onClick={onClose}>
                    Close
                  </Button>
                </ModalFooter>
              </ModalContent>
            )}
          </SlideFade>
        </ModalOverlay>
      </Modal>
    </>
  )
}