React TransitionGroupPlus
A drop-in replacement for the original react-addons-transition-group that allows interruptible transitions and specifying transition order.
Note that this is not API-compatible with react-transition-group v2
Installation
npm install --save react-transition-group-plus
Demo
Aside from being able to specify transition order, notice how a component's enter transition is aborted and the leave transition runs as soon as a component should no longer be active.
Why?
ReactTransitionGroup has a few shortcomings
-
Animation order can't be specified.
Different components'componentWillEnter
andcomponentWillLeave
always occur simultaneously.
It's difficult to wait for the outgoing component'scomponentWillLeave
to finish before running the incoming component'scomponentWillEnter
. -
The same component's transitions can't be interrupted.
Once a component'scomponentWillEnter
is called, calls to the same component'scomponentWillLeave
will be delayed until the enter animation finishes
This problem becomes apparent for page transitions and carousels, when something that's entering might need to immediately exit.
TransitionGroupPlus builds upon ReactTransitionGroup's existing code to solve these problems.
Usage
Usage of TransitionGroupPlus is nearly identical to ReactTransitionGroup. (See the guide on react's website on how to use ReactTransitionGroup)
Additional props:
transitionMode
(optional)
can have the following values:simultaneous
(default)
componentWillEnter
andcomponentWillLeave
will be run at the same time.
ThetransitionMode
prop can be omitted if simultaneous transitions are desired as this is the default value.out-in
Wait for the outgoing component'scomponentWillLeave
to finish before calling the incoming component'scomponentWillEnter
.
Note:
If an incoming component needs to leave while it's still waiting for itscomponentWillEnter
to be called, itscomponentWillEnter
will be skipped and only itscomponentWillLeave
will be called.in-out
Wait for the incoming component'scomponentWillEnter
to finish before calling the outgoing component'scomponentWillLeave
.
deferLeavingComponentRemoval
(optional, boolean, defaults tofalse
)
Whentrue
, children that leave will not be removed immediately after theircomponentWillLeave
is called, but will wait for the next component'scomponentWillEnter
to finish.
Only affects the transition modes "simultaneous" and "out-in". Has no effect on "in-out".
sample:
<TransitionGroupPlus transitionMode="in-out">
...
</TransitionGroupPlus>
Browser Support
This component relies on Promises, which exists natively in most browsers, but a polyfill would be required for IE11 and below.
Other than that, this should run on all browsers where React runs.