Refactor for fixing Animated re-render will cause transition disappear

examples/alert.js

@@ -1,10 +1,11 @@
 /* eslint no-console:0, react/no-multi-comp:0 */
 
-import './assets/index.less';
 import React from 'react';
 import PropTypes from 'prop-types';
 import ReactDOM from 'react-dom';
 import Animate from 'rc-animate';
+import './assets/index.less';
+
 let seed = 0;
 
 class Alert extends React.Component {
@@ -77,13 +78,12 @@ class AlertGroup extends React.Component {
 
   render() {
     const alerts = this.state.alerts;
-    const self = this;
     const children = alerts.map((a) => {
       if (!a.key) {
         seed++;
         a.key = String(seed);
       }
-      return <Alert {...a} onEnd={self.onEnd.bind(self, a.key)}/>;
+      return <Alert {...a} onEnd={() => { this.onEnd(a.key); }} />;
     });
     const style = {
       position: 'fixed',

examples/hide-todo.js

@@ -1,16 +1,17 @@
 /* eslint no-console:0, react/no-multi-comp:0 */
 
-import './assets/index.less';
 import React from 'react';
 import PropTypes from 'prop-types';
 import ReactDOM from 'react-dom';
 import Animate from 'rc-animate';
+import './assets/index.less';
 
 class Todo extends React.Component {
   static propTypes = {
     children: PropTypes.any,
     end: PropTypes.func,
     onClick: PropTypes.func,
+    visible: PropTypes.bool,
   }
 
   static defaultProps = {
@@ -48,7 +49,8 @@ class TodoList extends React.Component {
       { content: 'hello', visible: true },
       { content: 'world', visible: true },
       { content: 'click', visible: true },
-      { content: 'me', visible: true }],
+      { content: 'me', visible: true },
+    ],
   }
 
   handleHide = (i, item) => {
@@ -66,7 +68,7 @@ class TodoList extends React.Component {
         <Todo
           key={item.content}
           visible={item.visible}
-          onClick={this.handleHide.bind(this, i, item)}
+          onClick={() => { this.handleHide(i, item); }}
         >
           {item.content}
         </Todo>

examples/simple-animation.js

@@ -1,27 +1,25 @@
 /* eslint no-console:0, react/no-multi-comp:0 */
 
-import './assets/index.less';
 import Animate from 'rc-animate';
 import React from 'react';
 import PropTypes from 'prop-types';
 import ReactDOM from 'react-dom';
 import velocity from 'velocity-animate';
+import './assets/index.less';
 
-class Box extends React.Component {
-  static propTypes = {
-    visible: PropTypes.bool,
-  }
+const Box = (props) => {
+  const style = {
+    width: '200px',
+    display: props.visible ? 'block' : 'none',
+    height: '200px',
+    backgroundColor: 'red',
+  };
+  return (<div style={style} />);
+};
 
-  render() {
-    const style = {
-      width: '200px',
-      display: this.props.visible ? 'block' : 'none',
-      height: '200px',
-      backgroundColor: 'red',
-    };
-    return (<div style={style}></div>);
-  }
-}
+Box.propTypes = {
+  visible: PropTypes.bool,
+};
 
 class Demo extends React.Component {
   state = {
@@ -108,14 +106,14 @@ class Demo extends React.Component {
       <div>
         <label><input
           type="checkbox"
-          onChange={this.toggle.bind(this, 'visible')}
+          onChange={() => { this.toggle('visible'); }}
           checked={this.state.visible}
         />
           show</label>
         &nbsp;
         <label><input
           type="checkbox"
-          onChange={this.toggle.bind(this, 'exclusive')}
+          onChange={() => { this.toggle('exclusive'); }}
           checked={this.state.exclusive}
         />
           exclusive</label>

examples/simple-remove.js

@@ -1,9 +1,9 @@
 /* eslint no-console:0, react/no-multi-comp:0 */
 
-import './assets/index.less';
 import Animate from 'rc-animate';
 import React from 'react';
 import ReactDOM from 'react-dom';
+import './assets/index.less';
 
 class Demo extends React.Component {
   state = {

examples/simple.js

@@ -1,10 +1,10 @@
 /* eslint no-console:0, react/no-multi-comp:0 */
 
-import './assets/slow.less';
 import Animate from 'rc-animate';
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import ReactDOM from 'react-dom';
+import './assets/slow.less';
 
 const Div = (props) => {
   const { style, show, ...restProps } = props;
@@ -43,14 +43,14 @@ class Demo extends Component {
       <div>
         <label><input
           type="checkbox"
-          onChange={this.toggle.bind(this, 'enter')}
+          onChange={() => { this.toggle('enter'); }}
           checked={this.state.enter}
         />
           show</label>
         &nbsp;
         <label><input
           type="checkbox"
-          onChange={this.toggle.bind(this, 'exclusive')}
+          onChange={() => { this.toggle('exclusive'); }}
           checked={this.state.exclusive}
         />
           exclusive</label>

examples/todo-animation.js

@@ -1,11 +1,11 @@
 /* eslint no-console:0, react/no-multi-comp:0, no-alert:0 */
 
-import './assets/index.less';
 import React from 'react';
 import PropTypes from 'prop-types';
 import ReactDOM from 'react-dom';
 import Animate from 'rc-animate';
 import velocity from 'velocity-animate';
+import './assets/index.less';
 
 class Todo extends React.Component {
   static propTypes = {
@@ -94,7 +94,7 @@ class TodoList extends React.Component {
 
   handleAdd = () => {
     const newItems =
-      this.state.items.concat([prompt('Enter some text')]);
+      this.state.items.concat([prompt('Enter some text')]); // eslint-disable-line
     this.setState({ items: newItems });
   }
 
@@ -113,7 +113,7 @@ class TodoList extends React.Component {
   render() {
     const items = this.state.items.map((item, i) => {
       return (
-        <Todo key={item} onClick={this.handleRemove.bind(this, i)}>
+        <Todo key={item} onClick={() => { this.handleRemove(i); }}>
           {item}
         </Todo>
       );
@@ -129,7 +129,7 @@ class TodoList extends React.Component {
         <label>
           <input
             type="checkbox"
-            onChange={this.toggle.bind(this, 'exclusive')}
+            onChange={() => { this.toggle('exclusive'); }}
             checked={this.state.exclusive}
           />
           exclusive</label>

examples/todo.js

@@ -1,10 +1,10 @@
 /* eslint no-console:0, react/no-multi-comp:0, no-alert:0 */
 
-import './assets/index.less';
 import React from 'react';
 import PropTypes from 'prop-types';
 import ReactDOM from 'react-dom';
 import Animate from 'rc-animate';
+import './assets/index.less';
 
 class Todo extends React.Component {
   static propTypes = {
@@ -45,7 +45,7 @@ class TodoList extends React.Component {
   }
 
   handleAdd = () => {
-    const items = this.state.items.concat([prompt('Enter some text')]);
+    const items = this.state.items.concat([prompt('Enter some text')]); // eslint-disable-line
     this.setState({ items });
   }
 
@@ -58,7 +58,7 @@ class TodoList extends React.Component {
   render() {
     const items = this.state.items.map((item, i) => {
       return (
-        <Todo key={item} onClick={this.handleRemove.bind(this, i)}>
+        <Todo key={item} onClick={() => { this.handleRemove(i) }}>
           {item}
         </Todo>
       );

examples/transitionAppear.js

@@ -1,28 +1,26 @@
 /* eslint no-console:0, react/no-multi-comp:0 */
 
-import './assets/slow.less';
 import Animate from 'rc-animate';
 import React from 'react';
 import PropTypes from 'prop-types';
 import ReactDOM from 'react-dom';
+import './assets/slow.less';
 
-class Box extends React.Component {
-  static propTypes = {
-    visible: PropTypes.bool,
-  }
+const Box = (props) => {
+  console.log('render', props.visible);
+  const style = {
+    display: props.visible ? 'block' : 'none',
+    marginTop: '20px',
+    width: '200px',
+    height: '200px',
+    backgroundColor: 'red',
+  };
+  return (<div style={style} />);
+};
 
-  render() {
-    console.log('render', this.props.visible);
-    const style = {
-      display: this.props.visible ? 'block' : 'none',
-      marginTop: '20px',
-      width: '200px',
-      height: '200px',
-      backgroundColor: 'red',
-    };
-    return (<div style={style}/>);
-  }
-}
+Box.propTypes = {
+  visible: PropTypes.bool,
+};
 
 class Demo extends React.Component {
   state = {

examples/transitionLeave.js

@@ -1,9 +1,9 @@
 /* eslint no-console:0, react/no-multi-comp:0 */
 
-import './assets/index.less';
 import Animate from 'rc-animate';
 import React from 'react';
 import ReactDOM from 'react-dom';
+import './assets/index.less';
 
 class Demo extends React.Component {
   state = {

package.json

@@ -46,8 +46,8 @@
     "jquery": "^3.3.1",
     "pre-commit": "1.x",
     "rc-test": "6.x",
-    "rc-tools": "6.x",
-    "react": "^16.0.0",
+    "rc-tools": "8.x",
+    "react": "^16.3.0",
     "react-dom": "^16.0.0",
     "velocity-animate": "~1.2.2"
   },
@@ -56,7 +56,12 @@
   ],
   "dependencies": {
     "babel-runtime": "6.x",
-    "css-animation": "^1.3.2",
-    "prop-types": "15.x"
+    "classnames": "^2.2.5",
+    "component-classes": "^1.2.6",
+    "fbjs": "^0.8.16",
+    "prop-types": "15.x",
+    "raf": "^3.4.0",
+    "rc-util": "^4.5.0",
+    "react-lifecycles-compat": "^3.0.4"
   }
 }