Allow specifying new children to append vs prepend in ReactTransitionGroup

[hellosmithy]

In ReactTransitionGroup given a dynamic array of children e.g. first ['A', 'B'] then ['B', 'C'] while ReactTransitionGroup holds on to the exiting DOM nodes we see ['A', 'B', 'C'] in the DOM before done() is called. Then we see ['B', 'C']. This is all fine. However if we then transition to an entirely new array ['D'] in the DOM we see ['D', 'B', 'C'] instead of ['B', 'C', 'D'].

See the following fiddle: https://jsfiddle.net/92he8jge/1/

This seems to be because in ReactTransitionGroup next child mappings are merged with previous child mappings in that order. This is probably fine in most cases but it would be great if we could control the order.

I've got a version of this working locally by adding an appendNextChildMapping prop of type boolean which defaults to false. I'd be happy to turn this into a PR. Or perhaps there is another way to achieve this that I'm missing?

EDIT: Looking at this some more, it's not clear to me if how it currently works is actually intended behaviour.
https://github.com/facebook/react/blob/master/src/addons/transitions/ReactTransitionChildMapping.js#L90
It looks from this comment like it is in fact trying to add the new item after the existing ones but that the object is not preserving intended source order? Is this a bug in the implementation of mergeChildMappings?

[atran]

Important for SVG animations where z-index cannot be used to dictate z-order.

[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!