title: ReactCSSTransitionGroup reordering items during removal/addition
body: <p>I have a Bootstrap list-group with several items in it, and a filter text box.  When more than one item is added or removed from the group at the same time, the items get reordered.</p>
  
  <p><img src="https://i.stack.imgur.com/uC5AI.gif" alt="filtering reorders items before animation"></p>
  
  <p>In the removal case, all the remaining items are shifted to the top, and the removed items are shifted down for their animation. For example, suppose a list of three items: x, y, and z.  The filter suddenly filters out x and z, leaving y in place.  Item y gets placed into x's box, x into y's box, and then the second two boxes do their animation.</p>
  
  <p>In the addition case, the items are placed in sorted order, the existing boxes are filled by the first n items of the sorted list, and then the remaining items get animated boxes below it.  In our x, y, z list example, suppose x and z are already filtered out, and the only displayed item is y.  When the filter is removed, x takes y's box, two boxes are created below and filled with y and z.</p>
  
  <p>Here's a snippet of my code:</p>
  
  <pre><code>render() {
      let tables = this.state.tables;
      let items = [];
  
      for (let i in tables) {
          let table = tables[i],
              tableName = table.name,
              tableId = encodeURIComponent(tableName.replace(/\s+/g, '-')),
              isTableSelected = this.state.selectedTable &amp;&amp; table.name === this.state.selectedTable.name,
              show = tableMatchesFilter(table));
  
          if (show) {
              items.push(
                  &lt;div&gt; {/* wrap in div so we don't have to deal with animating padding */}
                      &lt;ListGroupItem 
                          className={classNames('list-group-item', {'active': isTableSelected })}
                          onClick={this.handleTableSelect.bind(this, tableId)}
                          itemKey={tableId} key={tableId} style={{whiteSpace: 'pre'}}
                          header={tableName}&gt;
                          {table.description}
                      &lt;/ListGroupItem&gt;
                  &lt;/div&gt;
              );
          }
      }
  
      return ( {/* ... */}
           &lt;div ref='tableListGroup' className='list-group col-xs-12'&gt;
              &lt;ReactCSSTransitionGroup transitionName='tableListGroup'&gt;
                  {items}
              &lt;/ReactCSSTransitionGroup&gt;
          &lt;/div&gt;
          {/* ... */}
      );
  }
  </code></pre>
  
  <p>I'm trying to figure out how to get the items to stay in their boxes and have the correct boxes appear/disappear.</p>