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.
Cartas committed
Dec 6, 2013 at 14:46 UTC
c313a1045db0a81a704df14f5da60f3690441fbf
1 file changed
+11
src/addons/transitions/ReactTransitionableChild.js
+11
@@ -129,6 +129,17 @@ var ReactTransitionableChild = React.createClass({
129
componentWillReceiveProps: function(nextProps) {
130
if (!nextProps.children && this.props.children) {
131
this.savedChildren = this.props.children;
132
+ } else if (nextProps.children && !this.props.children) {
133
+ // We're being told to keep this node! Better set it to enter again.
134
+ if (this.props.enter && this.isMounted())
135
+ {
136
+ var node = this.getDOMNode();
137
+ var className = this.props.name;
138
+ CSSCore.removeClass(node, className + '-leave');
139
+ CSSCore.removeClass(node, className + '-leave-active');
140
+ CSSCore.addClass(node, className + '-enter');
141
+ CSSCore.addClass(node, className + '-enter-active');
142
+ }
143
}
144
},
145