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 transitionunmountOnExit
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>
</>
);
}
Props
The transition components extends the framer-motion.
Fade Props
in
in
Show the component; triggers when enter or exit states
boolean
unmountOnExit
unmountOnExit
If true
, the element will unmount when `in={false}` and animation is done
boolean
ScaleFade Props
in
in
Show the component; triggers when enter or exit states
boolean
initialScale
initialScale
The initial scale of the element
number
0.95
reverse
reverse
If true
, the element will transition back to exit state
boolean
true
unmountOnExit
unmountOnExit
If true
, the element will unmount when `in={false}` and animation is done
boolean
Slide Props
direction
direction
The direction to slide from
SlideDirection
"right"
in
in
Show the component; triggers when enter or exit states
boolean
unmountOnExit
unmountOnExit
If true
, the element will unmount when `in={false}` and animation is done
boolean
SlideFade Props
in
in
Show the component; triggers when enter or exit states
boolean
offsetX
offsetX
The offset on the horizontal or x
axis
string | number
0
offsetY
offsetY
The offset on the vertical or y
axis
string | number
8
reverse
reverse
If true
, the element will be transitioned back to the offset when it leaves.
Otherwise, it'll only fade out
boolean
true
unmountOnExit
unmountOnExit
If true
, the element will unmount when `in={false}` and animation is done
boolean
Collapse Props
animateOpacity
animateOpacity
If true
, the opacity of the content will be animated
boolean
true
endingHeight
endingHeight
The height you want the content in its expanded state.
string | number
"auto"
in
in
Show the component; triggers when enter or exit states
boolean
startingHeight
startingHeight
The height you want the content in its collapsed state.
string | number
0
unmountOnExit
unmountOnExit
If true
, the element will unmount when `in={false}` and animation is done
boolean