<p dir="auto">The ReactTransistionGroup assumes that children should be prepended to their siblings when inserted into the parent. I think we should add an optional prop that allows configuration to prepend or append children. I have working code I can submit a pull request I just wanted to make sure I wasn't missing something.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="childrenToRender.push(React.cloneElement(
  this.props.childFactory(child),
  {ref: key, key: key}
));"><pre class="notranslate"><code class="notranslate">childrenToRender.push(React.cloneElement(
  this.props.childFactory(child),
  {ref: key, key: key}
));
</code></pre></div>
<p dir="auto"><a href="https://github.com/facebook/react/blob/master/src/addons/transitions/ReactTransitionGroup.js#L215-L218">https://github.com/facebook/react/blob/master/src/addons/transitions/ReactTransitionGroup.js#L215-L218</a></p>
<p dir="auto">In ReactTransitionGroup given a dynamic array of children e.g. first <code class="notranslate">['A', 'B']</code> then <code class="notranslate">['B', 'C']</code> while ReactTransitionGroup holds on to the exiting DOM nodes we see <code class="notranslate">['A', 'B', 'C']</code> in the DOM before <code class="notranslate">done()</code> is called. Then we see <code class="notranslate">['B', 'C']</code>. This is all fine. However if we then transition to an entirely new array <code class="notranslate">['D']</code> in the DOM we see <code class="notranslate">['D', 'B', 'C']</code> instead of <code class="notranslate">['B', 'C', 'D']</code>.</p>
<p dir="auto">See the following fiddle: <a href="https://jsfiddle.net/92he8jge/1/" rel="nofollow">https://jsfiddle.net/92he8jge/1/</a></p>
<p dir="auto">This seems to be because in <code class="notranslate">ReactTransitionGroup</code> 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.</p>
<p dir="auto">I've got a version of this working locally by adding an <code class="notranslate">appendNextChildMapping</code> 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?</p>
<p dir="auto"><strong>EDIT</strong>: Looking at this some more, it's not clear to me if how it currently works is actually intended behaviour.<br>
<a href="https://github.com/facebook/react/blob/master/src/addons/transitions/ReactTransitionChildMapping.js#L90">https://github.com/facebook/react/blob/master/src/addons/transitions/ReactTransitionChildMapping.js#L90</a><br>
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 <code class="notranslate">mergeChildMappings</code>?</p>