Show the component; triggers when enter or exit states
Transitions
Chakra exports five components `Fade`, `ScaleFade`, `Slide`, `SlideFade` and `Collapse` 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, Collapse } from '@chakra-ui/react'
Usage#
Chakra exports five components Fade, ScaleFade, Slide, SlideFade and Collapse to
provide simple transitions.
Fade transition#
ScaleFade transition#
Slide transition#
Slide Fade transition#
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.
Changing the startingHeight#
Changing transitions manually using motion props#
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
rightin
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
autoin
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