The <TransitionGroup> component manages a set of transition components
(<Transition> and <CSSTransition>) in a list. Like with the transition
components, <TransitionGroup> is a state machine for managing the mounting
and unmounting of components over time.
Consider the example below. As items are removed or added to the TodoList the
in prop is toggled automatically by the <TransitionGroup>.
Note that <TransitionGroup> does not define any animation behavior!
Exactly how a list item animates is up to the individual transition
component. This means you can mix and match animations across different list
items.
component<TransitionGroup> renders a <div> by default. You can change this
behavior by providing a component prop.
If you use React v16+ and would like to avoid a wrapping <div> element
you can pass in component={null}. This is useful if the wrapping div
borks your css styles.
any'div'childrenA set of <Transition> components, that are toggled in and out as they
leave. the <TransitionGroup> will inject specific transition props, so
remember to spread them through if you are wrapping the <Transition> as
with our <Fade> example.
While this component is meant for multiple Transition or CSSTransition
children, sometimes you may want to have a single transition child with
content that you want to be transitioned out and in when you change it
(e.g. routes, images etc.) In that case you can change the key prop of
the transition child as you change its content, this will cause
TransitionGroup to transition the child out and back in.
anyappearA convenience prop that enables or disables appear animations for all children. Note that specifying this will override any defaults set on individual children Transitions.
booleanenterA convenience prop that enables or disables enter animations for all children. Note that specifying this will override any defaults set on individual children Transitions.
booleanexitA convenience prop that enables or disables exit animations for all children. Note that specifying this will override any defaults set on individual children Transitions.
booleanchildFactoryYou may need to apply reactive updates to a child as it is exiting.
This is generally done by using cloneElement however in the case of an exiting
child the element has already been removed and not accessible to the consumer.
If you do need to update a child as it leaves you can provide a childFactory
to wrap every child, even the ones that are leaving.
Function(child: ReactElement) -> ReactElement(child) => child