Accommodate interruption of transitions in ReactTransitionGroup

[abutterworth]

Updated the way ReactTransitionGroup manages children and triggers animation events in order to allow for interruption of transitions. Now the TransitionGroup will not wait for didEnter callbacks in order to trigger willLeave.

This does not change the behavior of CSSTransitionGroups because it uses timeouts.

[gaearon]

Can you help me understand how this compares to #5028? Thanks!

[abutterworth]

They address the same issue. #5028 addresses the issue by making minimal changes to the implementation of ReactTransitionGroup, while this PR rethinks it somewhat.

The goal here was to avoid managing a list of transitions and instead create an object to represent the actual state of the children for comparison with the declared props.children. IMO this is a simpler solution, but I could understand the desire to change as little as possible.

As far as how they relate to #5575: I don't think either address that issue which, if I'm understanding correctly, has to do more with the order in which multiple components are added or removed.

Both this and #5028 address an issue like this: Given a toggle button that adds or removes a child from a ReactTransitionGroup. Let's say the transition takes 1 second to complete. In React currently, if you click the toggle button once to add the child and then again very quickly the child will complete its 1 second transition in and after it's finished begin its 1 second transition out. This approach, would start the transition out immediately after the second toggle click. I can add a demo if that needs illustration.

This isn't a bug fix. But I think it's an improvement upon the current behavior which has proved frustrating when trying to make fast responding UIs.

As far as whether this is a breaking change, I'm not sure. The current TransitionGroup will always call componentDidEnter if it calls componentWillEnter. With these changes, that is not guaranteed since you can effectively cancel an enter transition. So if a component started some process or set a timeout at willEnter that relies upon a didEnter callback to properly clean up, there would likely be issues.

[gaearon]

We don’t have an owner for ReactTransitionGroup internally because we don’t use it, and it seems like we don’t have the capacity to review PRs for it at the moment. Your best strategy might be to fork its code (or find an existing fork) and propose these changes there. If any of the forks turns out to be successful we might deprecate our own version and start pointing to the fork in the docs. Sorry it turned out to be this way, but it’s best to do something than to leave this hang forever so I’m closing.