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
npm install --save react-transition-group-plus
See a comparative demo between ReactTransitionGroup and TransitionGroupPlus
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.
ReactTransitionGroup has a few shortcomings
Animation order can't be specified.
componentWillLeave always occur simultaneously.
It's difficult to wait for the outgoing component's
componentWillLeave to finish before running the incoming component's
The same component's transitions can't be interrupted.
Once a component's
componentWillEnter is called, calls to the same component's
componentWillLeave 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 of TransitionGroupPlus is nearly identical to ReactTransitionGroup. (See the guide on react's website on how to use ReactTransitionGroup)
transitionMode(optional) can have the following values:
componentWillLeavewill be run at the same time.
transitionModeprop can be omitted if simultaneous transitions are desired as this is the default value.
componentWillLeaveto finish before calling the incoming component's
componentWillEnterto be called, its
componentWillEnterwill be skipped and only its
componentWillLeavewill be called.
componentWillEnterto finish before calling the outgoing component's
deferLeavingComponentRemoval(optional, boolean, defaults to
true, children that leave will not be removed immediately after their
componentWillLeaveis called, but will wait for the next component's
<TransitionGroupPlus transitionMode="in-out"> ... </TransitionGroupPlus>
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.
Since this code was forked from React's ReactTransitionGroup, significant lines of codes still fall under React's original BSD license.
New code is licensed under MIT
Inspired by Vue's transitions