Show the component; triggers when enter or exit states
Transitions
Chakra exports four components `Fade`, `ScaleFade`, `Slide`, and `SlideFade` to provide simple transitions.
Props#
The transition components extends the framer-motion.
Fade Props#
in
inDescription
Type
booleanunmountOnExit
unmountOnExitDescription
If true, the element will unmount when `in={false}` and animation is done
Type
booleanScaleFade Props#
in
inDescription
Show the component; triggers when enter or exit states
Type
booleaninitialScale
initialScaleDescription
The initial scale of the element
Type
numberDefault
0.95reverse
reverseDescription
If true, the element will transition back to exit state
Type
booleanDefault
trueunmountOnExit
unmountOnExitDescription
If true, the element will unmount when `in={false}` and animation is done
Type
booleanSlide Props#
direction
directionDescription
The direction to slide from
Type
SlideDirectionDefault
"right"in
inDescription
Show the component; triggers when enter or exit states
Type
booleanunmountOnExit
unmountOnExitDescription
If true, the element will unmount when `in={false}` and animation is done
Type
booleanSlideFade Props#
in
inDescription
Show the component; triggers when enter or exit states
Type
booleanoffsetX
offsetXDescription
The offset on the horizontal or x axis
Type
string | numberDefault
0offsetY
offsetYDescription
The offset on the vertical or y axis
Type
string | numberDefault
8reverse
reverseDescription
If true, the element will be transitioned back to the offset when it leaves.
Otherwise, it'll only fade out
Type
booleanDefault
trueunmountOnExit
unmountOnExitDescription
If true, the element will unmount when `in={false}` and animation is done
Type
booleanCollapse Props#
animateOpacity
animateOpacityDescription
If true, the opacity of the content will be animated
Type
booleanDefault
trueendingHeight
endingHeightDescription
The height you want the content in its expanded state.
Type
string | numberDefault
"auto"in
inDescription
Show the component; triggers when enter or exit states
Type
booleanstartingHeight
startingHeightDescription
The height you want the content in its collapsed state.
Type
string | numberDefault
0unmountOnExit
unmountOnExitDescription
If true, the element will unmount when `in={false}` and animation is done
Type
booleanProps#
The transition components extends the framer-motion.
Fade Props#
in
inDescription
Show the component; triggers when enter or exit states
Type
booleanunmountOnExit
unmountOnExitDescription
If true, the element will unmount when `in={false}` and animation is done
Type
booleanScaleFade Props#
in
inDescription
Show the component; triggers when enter or exit states
Type
booleaninitialScale
initialScaleDescription
The initial scale of the element
Type
numberDefault
0.95reverse
reverseDescription
If true, the element will transition back to exit state
Type
booleanDefault
trueunmountOnExit
unmountOnExitDescription
If true, the element will unmount when `in={false}` and animation is done
Type
booleanSlide Props#
direction
directionDescription
The direction to slide from
Type
SlideDirectionDefault
"right"in
inDescription
Show the component; triggers when enter or exit states
Type
booleanunmountOnExit
unmountOnExitDescription
If true, the element will unmount when `in={false}` and animation is done
Type
booleanSlideFade Props#
in
inDescription
Show the component; triggers when enter or exit states
Type
booleanoffsetX
offsetXDescription
The offset on the horizontal or x axis
Type
string | numberDefault
0offsetY
offsetYDescription
The offset on the vertical or y axis
Type
string | numberDefault
8reverse
reverseDescription
If true, the element will be transitioned back to the offset when it leaves.
Otherwise, it'll only fade out
Type
booleanDefault
trueunmountOnExit
unmountOnExitDescription
If true, the element will unmount when `in={false}` and animation is done
Type
booleanCollapse Props#
animateOpacity
animateOpacityDescription
If true, the opacity of the content will be animated
Type
booleanDefault
trueendingHeight
endingHeightDescription
The height you want the content in its expanded state.
Type
string | numberDefault
"auto"in
inDescription
Show the component; triggers when enter or exit states
Type
booleanstartingHeight
startingHeightDescription
The height you want the content in its collapsed state.
Type
string | numberDefault
0unmountOnExit
unmountOnExitDescription
If true, the element will unmount when `in={false}` and animation is done
Type
boolean