<p dir="auto">While trying to convince React to replace DOM nodes in-place (which seems is not supported), I've discovered something that looks like bugs. I've put up a demo on <a href="http://jsbin.com/hokahaze/6/edit" rel="nofollow">http://jsbin.com/hokahaze/6/edit</a> .</p>
<p dir="auto">First of all, if a node gets replaced while animation is progressing, it is not removed. In the demo it means additional lines are created. As soon as the animation completes, the node usually goes away.</p>
<p dir="auto">The second "feature" here is that if you leave that demo running, change to another tab, wait 10 seconds and change back to the tab with the demo running, it will now have accumulated lots of "green items" which are basically stuck (meaning their animation completed, but they were not removed from the dom).</p>
<p dir="auto">ReactTransitionableChild sets up listeners to detect when animations/transitions are complete so it knows when to remove the transition classes (and DOM elements for a "leave" transition). These listeners get confused when more than one element in the transitionable child tree performs an animation/transition. For example:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;div className=&quot;outer&quot;&gt;
  &lt;div className=&quot;inner&quot; /&gt;
&lt;/div&gt;"><pre class="notranslate"><code class="notranslate">&lt;div className="outer"&gt;
  &lt;div className="inner" /&gt;
&lt;/div&gt;
</code></pre></div>
<p dir="auto">Say the desired effect is for the outer div to fade in first, followed by the inner div. This is possible with two CSS transitions with the appropriate durations and delays.</p>
<p dir="auto">React gets confused when this element is removed in the middle of the inner transition (in fact, I think removing the element before the outer transition finishes can also confuse React). Generally, listening to bubbled transition events violates encapsulation in some cases.</p>