From c313a1045db0a81a704df14f5da60f3690441fbf Mon Sep 17 00:00:00 2001 From: Cartas Date: Fri, 6 Dec 2013 14:46:33 +0100 Subject: [PATCH 1/2] Nodes that have had their child removed already, but then get given a new one no longer bug-out. In the case of having an animated node which is, after the leave-transition has been activated, then re-added in a render call causes React to 'break'. This is especially noticeable if you spam to removal and re-addition of an item in a ReactTransitionGroup. This fix simply stops the leave transition and restarts the enter transition. --- src/addons/transitions/ReactTransitionableChild.js | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/src/addons/transitions/ReactTransitionableChild.js b/src/addons/transitions/ReactTransitionableChild.js index 31d1b4398473..26132e8d5914 100644 --- a/src/addons/transitions/ReactTransitionableChild.js +++ b/src/addons/transitions/ReactTransitionableChild.js @@ -129,6 +129,17 @@ var ReactTransitionableChild = React.createClass({ componentWillReceiveProps: function(nextProps) { if (!nextProps.children && this.props.children) { this.savedChildren = this.props.children; + } else if (nextProps.children && !this.props.children) { + // We're being told to keep this node! Better set it to enter again. + if (this.props.enter && this.isMounted()) + { + var node = this.getDOMNode(); + var className = this.props.name; + CSSCore.removeClass(node, className + '-leave'); + CSSCore.removeClass(node, className + '-leave-active'); + CSSCore.addClass(node, className + '-enter'); + CSSCore.addClass(node, className + '-enter-active'); + } } }, From 7d8190f56e1501baf6b5d049a7c50ea85d270657 Mon Sep 17 00:00:00 2001 From: Cartas Date: Fri, 6 Dec 2013 15:37:38 +0100 Subject: [PATCH 2/2] Updated the animation-fix to account for transitionEnter being false. --- src/addons/transitions/ReactTransitionableChild.js | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/src/addons/transitions/ReactTransitionableChild.js b/src/addons/transitions/ReactTransitionableChild.js index 26132e8d5914..23267726a614 100644 --- a/src/addons/transitions/ReactTransitionableChild.js +++ b/src/addons/transitions/ReactTransitionableChild.js @@ -130,15 +130,16 @@ var ReactTransitionableChild = React.createClass({ if (!nextProps.children && this.props.children) { this.savedChildren = this.props.children; } else if (nextProps.children && !this.props.children) { - // We're being told to keep this node! Better set it to enter again. - if (this.props.enter && this.isMounted()) - { + // We're being told to re-add the child. Let's stop leaving! + if (this.isMounted()) { var node = this.getDOMNode(); var className = this.props.name; CSSCore.removeClass(node, className + '-leave'); CSSCore.removeClass(node, className + '-leave-active'); - CSSCore.addClass(node, className + '-enter'); - CSSCore.addClass(node, className + '-enter-active'); + if (this.props.enter) { + CSSCore.addClass(node, className + '-enter'); + CSSCore.addClass(node, className + '-enter-active'); + } } } },