ReactTransitionGroup: in-progress transitions should be interruptible, just like CSS transitions

[jedwards1211]

If I remove a child from a ReactTransitionGroup before it calls its componentWillEnter callback, ReactTransitionGroup doesn't call its componentWillLeave until componentWillEnter calls its callback.

This may be the intended behavior, but this is not the way CSS transitions behave, at least not in modern browsers I know. If you have <div style="transition: opacity linear 5s">, and you toggle its opacity from 0.01 to 1 every second, the div never finishes going through the first 5 second transition, rather, it gets interrupted after one second and a new transition from about 0.2 back to 0.01 begins.

I have a repo to reproduce this issue here: https://github.com/jedwards1211/react-transition-group-issue

If you run it and look at the console you will see how component leaving gets held up until components finish entering:

[10:04:31 GMT-0500 (CDT)]: 1 entering...
App.js:67 [10:04:31 GMT-0500 (CDT)]: added $(key}
App.js:67 [10:04:32 GMT-0500 (CDT)]: removed 1
App.js:67 [10:04:34 GMT-0500 (CDT)]: 1 entered
App.js:67 [10:04:34 GMT-0500 (CDT)]: 1 leaving...
App.js:67 [10:04:34 GMT-0500 (CDT)]: 1 left
App.js:67 [10:04:36 GMT-0500 (CDT)]: 2 entering...
App.js:67 [10:04:36 GMT-0500 (CDT)]: added $(key}
App.js:67 [10:04:37 GMT-0500 (CDT)]: removed 2
App.js:67 [10:04:39 GMT-0500 (CDT)]: 2 entered
App.js:67 [10:04:39 GMT-0500 (CDT)]: 2 leaving...
App.js:67 [10:04:39 GMT-0500 (CDT)]: 2 left

The 'entered' messages should never appear because the components should leave before they finish entering, like so:

[10:04:31 GMT-0500 (CDT)]: 1 entering...
App.js:67 [10:04:31 GMT-0500 (CDT)]: added $(key}
App.js:67 [10:04:32 GMT-0500 (CDT)]: removed 1
App.js:67 [10:04:32 GMT-0500 (CDT)]: 1 leaving...
App.js:67 [10:04:32 GMT-0500 (CDT)]: 1 left
App.js:67 [10:04:36 GMT-0500 (CDT)]: 2 entering...
App.js:67 [10:04:36 GMT-0500 (CDT)]: added $(key}
App.js:67 [10:04:37 GMT-0500 (CDT)]: removed 2
App.js:67 [10:04:37 GMT-0500 (CDT)]: 2 leaving...
App.js:67 [10:04:37 GMT-0500 (CDT)]: 2 left

Here is a spec for CSS-like ReactTranstionGroup behavior:

• It internally keeps track of whether a component is appearing, entering, or leaving
• If a component is removed while it's entering or appearing, its state is set to leaving and its componentWillLeave is called immediately
• If a component is added back while it's leaving, its state is set to entering and its componentWillEnter is called immediately
• When componentWillAppear calls its callback, no action is taken unless the component is in appearing state.
• When componentWillEnter calls its callback, no action is taken unless the component is in entering state.
• When componentWillLeave calls its callback, no action is taken unless the component is in leaving state.

[gaearon]

I’m going to close since we don’t plan any more changes to TransitionGroup in React repo. Instead, it now is maintained by the community, and you can file an issue in the new repository if this is still affecting you. Thanks!

[cvle]

Checkout this project as an alternative: https://github.com/wikiwi/react-css-transition