Scale Transition
The scale transition is generally used for temporary elements like dropdown menus and toasts. See the CSSTransition component and useCSSTransition for additional options.
Simple Example
The transition can be enabled using the ScaleTransition
component which
defaults to:
- Dynamically rendering the children only while
transitionIn
istrue
- Triggering an enter transition from
scale(0)
toscale(1)
- Triggering an exit transition from
scale(1)
toscale(0)
The ScaleTransition
requires a single child component that accepts the
className
prop and forwards ref
s like the other CSS transitions.
Vertical Example
The transition can be updated to use scaleY
by enabling the vertical
prop.
Hidden While Exited
The default behavior for the ScaleTransition
is to unmount the component while
not visible. Since this causes the state of these components to reset, this
means the state needs to be pushed up the tree which isn't always ideal.
Instead, the ScaleTransition
supports using display: none
while not visible
instead by setting temporary={false}
.
Clicked: 0 times
Scale Transition Hook Example
The useScaleTransition
can be used instead of the ScaleTransition
component
which exposes the full API.