From 6beb28863f63884645a6342d38f2d55c30651ad3 Mon Sep 17 00:00:00 2001 From: James Ide Date: Wed, 13 Nov 2013 16:30:17 -0800 Subject: [PATCH 1/2] [ReactTransitionGroup] Entry transition only when adding to an existing group Currently if you add a new ReactTransitionGroup with some children during a render pass, the children are transitioned. This is generally not desirable (e.g. if adding a transition-enabled list that already has some items, you don't want to transition all of the initial items when first rendering the list). This diff makes it so that entry transitions are applied only when the transition group already exists. This is implemented by applying entry transitions only when the group has already been mounted. --- .../transitions/ReactTransitionGroup.js | 2 +- .../__tests__/ReactTransitionGroup-test.js | 22 +++++++++++++++++++ 2 files changed, 23 insertions(+), 1 deletion(-) diff --git a/src/addons/transitions/ReactTransitionGroup.js b/src/addons/transitions/ReactTransitionGroup.js index 935d92494af..831c89ed583 100644 --- a/src/addons/transitions/ReactTransitionGroup.js +++ b/src/addons/transitions/ReactTransitionGroup.js @@ -76,7 +76,7 @@ var ReactTransitionGroup = React.createClass({ if (childMapping[key] || this.props.transitionLeave) { children[key] = ReactTransitionableChild({ name: this.props.transitionName, - enter: this.props.transitionEnter, + enter: this.props.transitionEnter && this.isMounted(), onDoneLeaving: this._handleDoneLeaving.bind(this, key) }, childMapping[key]); } diff --git a/src/addons/transitions/__tests__/ReactTransitionGroup-test.js b/src/addons/transitions/__tests__/ReactTransitionGroup-test.js index 1e5801f3bd8..3faf4993ff6 100644 --- a/src/addons/transitions/__tests__/ReactTransitionGroup-test.js +++ b/src/addons/transitions/__tests__/ReactTransitionGroup-test.js @@ -36,8 +36,30 @@ describe('ReactTransitionGroup', function() { container = document.createElement('div'); }); + it('should not run the entry transition for initial children', function() { + var container; + var a; + + container = document.createElement('div'); + a = React.renderComponent( + + + , + container + ); + expect(a.getDOMNode().childNodes.length).toBe(1); + expect(a.getDOMNode().childNodes[0].className).toBe(''); + }); + it('should warn after time with no transitionend', function() { var a = React.renderComponent( + + {[]} + , + container + ); + + a = React.renderComponent( , From 68903f4194e7746f2127a9be91f129667f71991c Mon Sep 17 00:00:00 2001 From: James Ide Date: Wed, 13 Nov 2013 18:16:14 -0800 Subject: [PATCH 2/2] [ReactTransitionGroup] Add a transitionOnMount prop to transition initial children --- .../transitions/ReactTransitionGroup.js | 6 ++++- .../__tests__/ReactTransitionGroup-test.js | 24 ++++++++++++++----- 2 files changed, 23 insertions(+), 7 deletions(-) diff --git a/src/addons/transitions/ReactTransitionGroup.js b/src/addons/transitions/ReactTransitionGroup.js index 831c89ed583..67aae4f4af1 100644 --- a/src/addons/transitions/ReactTransitionGroup.js +++ b/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 && this.isMounted(), + 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) diff --git a/src/addons/transitions/__tests__/ReactTransitionGroup-test.js b/src/addons/transitions/__tests__/ReactTransitionGroup-test.js index 3faf4993ff6..ae2d825e6e3 100644 --- a/src/addons/transitions/__tests__/ReactTransitionGroup-test.js +++ b/src/addons/transitions/__tests__/ReactTransitionGroup-test.js @@ -36,7 +36,7 @@ describe('ReactTransitionGroup', function() { container = document.createElement('div'); }); - it('should not run the entry transition for initial children', function() { + it('should not transition in initial children by default', function() { var container; var a; @@ -51,16 +51,28 @@ describe('ReactTransitionGroup', function() { expect(a.getDOMNode().childNodes[0].className).toBe(''); }); - it('should warn after time with no transitionend', function() { - var a = React.renderComponent( - - {[]} + it('should transition in initial children when specified', function() { + var container; + var a; + + container = document.createElement('div'); + a = React.renderComponent( + + , 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( - + , container