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
motionelements inprop used to trigger the transitionunmountOnExitprop 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>
</>
);
}
Props
The transition components extends the framer-motion.
Fade Props
in
inShow the component; triggers when enter or exit states
booleanunmountOnExit
unmountOnExitIf true, the element will unmount when `in={false}` and animation is done
booleanScaleFade Props
in
inShow the component; triggers when enter or exit states
booleaninitialScale
initialScaleThe initial scale of the element
number0.95reverse
reverseIf true, the element will transition back to exit state
booleantrueunmountOnExit
unmountOnExitIf true, the element will unmount when `in={false}` and animation is done
booleanSlide Props
direction
directionThe direction to slide from
SlideDirection"right"in
inShow the component; triggers when enter or exit states
booleanunmountOnExit
unmountOnExitIf true, the element will unmount when `in={false}` and animation is done
booleanSlideFade Props
in
inShow the component; triggers when enter or exit states
booleanoffsetX
offsetXThe offset on the horizontal or x axis
string | number0offsetY
offsetYThe offset on the vertical or y axis
string | number8reverse
reverseIf true, the element will be transitioned back to the offset when it leaves.
Otherwise, it'll only fade out
booleantrueunmountOnExit
unmountOnExitIf true, the element will unmount when `in={false}` and animation is done
booleanCollapse Props
animateOpacity
animateOpacityIf true, the opacity of the content will be animated
booleantrueendingHeight
endingHeightThe height you want the content in its expanded state.
string | number"auto"in
inShow the component; triggers when enter or exit states
booleanstartingHeight
startingHeightThe height you want the content in its collapsed state.
string | number0unmountOnExit
unmountOnExitIf true, the element will unmount when `in={false}` and animation is done
boolean