The children to render.
The animation classNames applied to the component as it enters or exits.
A single name can be provided and it will be suffixed for each stage: e.g.
classNames="fade" applies fade-enter, fade-enter-active,
fade-exit, fade-exit-active, fade-appear, and fade-appear-active.
Each individual classNames can also be specified independently like:
classNames={{
appear: 'my-appear',
appearActive: 'my-appear-active',
appearDone: 'my-appear-done',
enter: 'my-enter',
enterActive: 'my-enter-active',
enterDone: 'my-enter-done',
exit: 'my-exit',
exitActive: 'my-exit-active',
exitDone: 'my-exit-done'
}}
Enable or disable enter transitions.
Enable or disable exit transitions.
Show the component; triggers the enter or exit states
By default the child component is mounted immediately along with the
parent Transition component. If you want to "lazy mount" the component on
the first in={true} you can set mountOnEnter. After the first enter
transition the component will stay mounted, even on "exited", unless you
also specify unmountOnExit.
Callback fired before the "entering" status is applied. An extra
parameter isAppearing is supplied to indicate if the enter stage is
occurring on the initial mount
Callback fired after the "entered" status is applied. An extra parameter isAppearing is supplied to indicate if the enter stage is occurring on the initial mount
Callback fired after the "entering" status is applied. An extra parameter isAppearing is supplied to indicate if the enter stage is occurring on the initial mount
Callback fired before the "exiting" status is applied.
Callback fired after the "exited" status is applied.
Callback fired after the "exiting" status is applied.
Boolean if the portal should be used.
By default the child component stays mounted after it reaches the
'exited' state. Set unmountOnExit if you'd prefer to unmount the
component after it finishes exiting.
Boolean if the vertical scale animation should be used instead of the normal scale animation.
Boolean if the animation should be triggered. Enabling this will trigger the appear/enter animations while disabling it will trigger the exit animation.
Generated using TypeDoc
Normally a component is not transitioned if it is shown when the
<Transition>component mounts. If you want to transition on the first mount set appear to true, and the component will transition in as soon as the<Transition>mounts. Note: there are no specific "appear" states. appear only adds an additional enter transition.