| 1 | # React TransitionGroupPlus
|
| 2 |
|
| 3 | [](https://www.npmjs.com/package/react-transition-group-plus) [](https://npmcharts.com/compare/react-transition-group-plus?minimal=true)
|
| 4 |
|
| 5 | A drop-in replacement for ReactTransitionGroup that allows interruptible transitions and specifying transition order.
|
| 6 | ### Installation
|
| 7 |
|
| 8 | ```
|
| 9 | npm install --save react-transition-group-plus
|
| 10 | ```
|
| 11 |
|
| 12 | ### Demo
|
| 13 | See a **[comparative demo](http://cheapsteak.github.com/react-transition-group-plus/)** between ReactTransitionGroup and TransitionGroupPlus
|
| 14 |
|
| 15 | 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.
|
| 16 |
|
| 17 | ### Why?
|
| 18 |
|
| 19 | ReactTransitionGroup has a few shortcomings
|
| 20 |
|
| 21 | - **Animation order can't be specified.**
|
| 22 | Different components' `componentWillEnter` and `componentWillLeave` always occur simultaneously.
|
| 23 | It's difficult to wait for the outgoing component's `componentWillLeave` to finish before running the incoming component's `componentWillEnter`.
|
| 24 |
|
| 25 | - **The same component's transitions can't be interrupted**.
|
| 26 | Once a component's `componentWillEnter` is called, calls to the same component's `componentWillLeave` will be delayed until the enter animation finishes
|
| 27 | This problem becomes apparent for page transitions and carousels, when something that's entering might need to immediately exit.
|
| 28 |
|
| 29 | TransitionGroupPlus builds upon ReactTransitionGroup's existing code to solve these problems.
|
| 30 |
|
| 31 |
|
| 32 | ### Usage
|
| 33 |
|
| 34 | Usage of TransitionGroupPlus is nearly identical to ReactTransitionGroup. (See the [guide on react's website](https://facebook.github.io/react/docs/animation.html#low-level-api-reacttransitiongroup) on how to use ReactTransitionGroup)
|
| 35 |
|
| 36 | Additional props:
|
| 37 |
|
| 38 | - **`transitionMode`** (optional)
|
| 39 | can have the following values:
|
| 40 | - `simultaneous` _(default)_
|
| 41 | `componentWillEnter` and `componentWillLeave` will be run at the same time.
|
| 42 | The `transitionMode` prop can be omitted if simultaneous transitions are desired as this is the default value.
|
| 43 | - `out-in`
|
| 44 | Wait for the outgoing component's `componentWillLeave` to finish before calling the incoming component's `componentWillEnter`.
|
| 45 | Note:
|
| 46 | If an incoming component needs to leave while it's still waiting for its `componentWillEnter` to be called, its `componentWillEnter` will be skipped and only its `componentWillLeave` will be called.
|
| 47 | - `in-out`
|
| 48 | Wait for the incoming component's `componentWillEnter` to finish before calling the outgoing component's `componentWillLeave`.
|
| 49 | - **`deferLeavingComponentRemoval`** (optional, boolean, defaults to `false`)
|
| 50 | When `true`, children that leave will not be removed immediately after their `componentWillLeave` is called, but will wait for the next component's `componentWillEnter` to finish.
|
| 51 | Only affects the transition modes "simultaneous" and "out-in". Has no effect on "in-out".
|
| 52 |
|
| 53 | ##### sample:
|
| 54 | ```js
|
| 55 | <TransitionGroupPlus transitionMode="in-out">
|
| 56 | ...
|
| 57 | </TransitionGroupPlus>
|
| 58 | ```
|
| 59 |
|
| 60 | ### Browser Support
|
| 61 |
|
| 62 | This component relies on Promises, which exists natively in most browsers, but a polyfill would be required for IE11 and below.
|
| 63 |
|
| 64 | Other than that, this should run on all browsers where React runs.
|
| 65 |
|
| 66 | ### License
|
| 67 |
|
| 68 | Since this code was forked from React's ReactTransitionGroup, significant lines of codes still fall under React's original BSD license.
|
| 69 |
|
| 70 | New code is licensed under MIT
|
| 71 |
|
| 72 |
|
| 73 | Inspired by [Vue's transitions](http://vuejs.org/guide/transitions.html#JavaScript_Transitions)
|