Transitions

Chakra exports four components Fade, ScaleFade, Slide, and SlideFade to provide simple transitions.

Import#

Usage#

Fade transition#

Editable Example

ScaleFade transition#

Editable Example

Slide transition#

Editable Example

SlideFade transition#

Editable Example

Props#

The transition components extends the react-transition-group Transition component, so you can pass all TransitionProps in addition to these:

Fade Props#

NameTypeDefaultDescription
inbooleanfalseShow the component; triggers the enter or exit states
timeoutnumber150The duration of the transition, in milliseconds

ScaleFade Props#

NameTypeDefaultDescription
inbooleanfalseShow the component; triggers the enter or exit states
initialScalenumber0.9The initial scale to animate from
timeoutnumber150The duration of the transition, in milliseconds

Slide Props#

NameTypeDefaultDescription
inbooleanfalseShow the component; triggers the enter or exit states
placementstring'bottom'The direction to slide drawer from
timeoutnumber150The duration of the transition, in milliseconds

SlideFade Props#

NameTypeDefaultDescription
inbooleanfalseShow the component; triggers the enter or exit states
initialOffsetstring'20px'The initial offset to slide from
timeoutnumber150The duration of the transition, in milliseconds
Edit this page

Made byChakraandRock Content