[ReactTransitionGroup] Entry transition only when adding to an existing group

src/addons/transitions/ReactTransitionGroup.js

@@ -28,6 +28,7 @@ var ReactTransitionGroup = React.createClass({
     transitionName: React.PropTypes.string.isRequired,
     transitionEnter: React.PropTypes.bool,
     transitionLeave: React.PropTypes.bool,
+    transitionOnMount: React.PropTypes.bool,
     onTransition: React.PropTypes.func,
     component: React.PropTypes.func
   },
@@ -36,6 +37,7 @@ var ReactTransitionGroup = React.createClass({
     return {
       transitionEnter: true,
       transitionLeave: true,
+      transitionOnMount: false,
       component: React.DOM.span
     };
   },
@@ -62,6 +64,7 @@ var ReactTransitionGroup = React.createClass({
     var children = {};
     var childMapping = ReactTransitionKeySet.getChildMapping(sourceChildren);
 
+    var allowEnterTransitions = this.props.transitionOnMount || this.isMounted();
     var currentKeys = ReactTransitionKeySet.mergeKeySets(
       this._transitionGroupCurrentKeys,
       ReactTransitionKeySet.getKeySet(sourceChildren)
@@ -76,7 +79,7 @@ var ReactTransitionGroup = React.createClass({
       if (childMapping[key] || this.props.transitionLeave) {
         children[key] = ReactTransitionableChild({
           name: this.props.transitionName,
-          enter: this.props.transitionEnter,
+          enter: allowEnterTransitions && this.props.transitionEnter,
           onDoneLeaving: this._handleDoneLeaving.bind(this, key)
         }, childMapping[key]);
       }
@@ -101,6 +104,7 @@ var ReactTransitionGroup = React.createClass({
           transitionName: null,
           transitionEnter: null,
           transitionLeave: null,
+          transitionOnMount: null,
           component: null
         },
         this.renderTransitionableChildren(this.props.children)

src/addons/transitions/__tests__/ReactTransitionGroup-test.js

@@ -36,14 +36,48 @@ describe('ReactTransitionGroup', function() {
     container = document.createElement('div');
   });
 
-  it('should warn after time with no transitionend', function() {
-    var a = React.renderComponent(
+  it('should not transition in initial children by default', function() {
+    var container;
+    var a;
+
+    container = document.createElement('div');
+    a = React.renderComponent(
       <ReactTransitionGroup transitionName="yolo">
         <span key="one" id="one" />
       </ReactTransitionGroup>,
       container
     );
     expect(a.getDOMNode().childNodes.length).toBe(1);
+    expect(a.getDOMNode().childNodes[0].className).toBe('');
+  });
+
+  it('should transition in initial children when specified', function() {
+    var container;
+    var a;
+
+    container = document.createElement('div');
+    a = React.renderComponent(
+      <ReactTransitionGroup transitionName="yolo" transitionOnMount={true}>
+        <span key="one" id="one" />
+      </ReactTransitionGroup>,
+      container
+    );
+    expect(a.getDOMNode().childNodes.length).toBe(1);
+    expect(a.getDOMNode().childNodes[0].className.trim()).toBe('yolo-enter');
+  });
+
+  it('should warn after time with no transitionend', function() {
+    var container;
+    var a;
+
+    container = document.createElement('div');
+    a = React.renderComponent(
+      <ReactTransitionGroup transitionName="yolo" transitionOnMount={true}>
+        <span key="one" id="one" />
+      </ReactTransitionGroup>,
+      container
+    );
+    expect(a.getDOMNode().childNodes.length).toBe(1);
 
     setTimeout.mock.calls.length = 0;