Permalink
Browse files

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.
  • Loading branch information...
1 parent 1be9a9e commit c313a1045db0a81a704df14f5da60f3690441fbf @Cartas Cartas committed Dec 6, 2013
Showing with 11 additions and 0 deletions.
  1. +11 −0 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');
+ }
}
},

0 comments on commit c313a10

Please sign in to comment.