Transition is used to gracefully manage shown/hidden state for components by adding css transitions and delaying unmount until transitioning out has finished.

() => {
  const [isIn, setIsIn] = useState<boolean>(true);
  const elementRef = useRef<HTMLDivElement>(null);

  return (
    <>
      <Button onClick={() => setIsIn((old) => !old)}>Toggle</Button>
      <Transition in={isIn} timeout={100} className="my-transition" nodeRef={elementRef}>
        <div ref={elementRef}>Child Mounted</div>
      </Transition>
    </>
  );
}

Transition

() => {
  const [isIn, setIsIn] = useState<boolean>(true);
  const box1Ref = useRef<HTMLDivElement>(null);
  const box2Ref = useRef<HTMLDivElement>(null);
  const box3Ref = useRef<HTMLDivElement>(null);
  const box4Ref = useRef<HTMLDivElement>(null);

  return (
    <Box flexDirection="column">
      <Button onClick={() => setIsIn((old) => !old)}>Toggle</Button>
      <Box flexDirection="column" width={300} minHeight={450} marginTop={10}>
        <Transition.Fade in={isIn} timeout={600} nodeRef={box1Ref}>
          <Box
            display="flex"
            justifyContent="center"
            alignItems="center"
            backgroundColor="background.subtle"
            height={100}
            marginBottom={10}
            ref={box1Ref}
          >
            Fade Transition
          </Box>
        </Transition.Fade>
        <Transition.Slide in={isIn} timeout={600} nodeRef={box2Ref}>
          <Box
            display="flex"
            justifyContent="center"
            alignItems="center"
            backgroundColor="background.subtle"
            height={100}
            marginY={10}
            ref={box2Ref}
          >
            Slide Transition
          </Box>
        </Transition.Slide>
        <Transition.Scale in={isIn} timeout={600} nodeRef={box3Ref}>
          <Box
            display="flex"
            justifyContent="center"
            alignItems="center"
            backgroundColor="background.subtle"
            height={100}
            marginTop={10}
            ref={box3Ref}
          >
            Scale Transition
          </Box>
        </Transition.Scale>
        <div ref={box4Ref}>
          <Transition.Collapse in={isIn} timeout={600} nodeRef={box4Ref}>
            <Box
              display="flex"
              justifyContent="center"
              alignItems="center"
              backgroundColor="background.subtle"
              height={100}
              marginTop={10}
            >
              Collapse Transition
            </Box>
          </Transition.Collapse>
        </div>
      </Box>
    </Box>
  );
}

Base transition variants include \`Fade\`, \`Slide\` & \`Scale\`.


Transition component

Transition Variants