fix empty child refresh stopped animate

Author: jljsj33

examples/custom-ease.js

@@ -5,7 +5,7 @@ import ReactDom from 'react-dom';
 
 ReactDom.render(
   <div style={{ height: 500 }}>
-    <QueueAnim ease={[0.175, 0.885, 0.32, 1.275]}>
+    <QueueAnim ease={[[0.175, 0.885, 0.32, 1.275]]}>
       <div key="1">div 1</div>
       <div key="2">div 1</div>
       <div key="3">div 1</div>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rc-queue-anim",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "description": "Queue animation component for react",
   "keywords": [
     "react",
@@ -54,13 +54,12 @@
     "expect.js": "0.3.x",
     "pre-commit": "1.x",
     "rc-test": "6.x",
-    "rc-tools": "6.x",
+    "rc-tools": "7.x",
     "react": "^16.0.0",
     "react-dom": "^16.0.0",
     "antd": "^2.12.3",
-    "jquery": "~1.11.3",
     "precommit-hook": "1.x",
-    "rc-dialog": "~5.2.1",
+    "rc-dialog": "~7.0.4",
     "react-router-dom": "^4.1.0",
     "react-router": "~4.1.0"
   },

src/QueueAnim.jsx

@@ -87,9 +87,10 @@ class QueueAnim extends React.Component {
   }
 
   componentWillReceiveProps(nextProps) {
-    const nextChildren = toArrayChildren(nextProps.children);
-    let currentChildren = this.originalChildren;
-    if (!nextChildren.length && !currentChildren.length && this.state.children.length) {
+    const nextChildren = toArrayChildren(nextProps.children).filter(item => item);
+    let currentChildren = this.originalChildren.filter(item => item);
+    const emptyBool = !nextChildren.length && !currentChildren.length && this.state.children.length;
+    if (emptyBool) {
       /**
        * 多次刷新空子级处理
        * 如果 state.children 里还有元素，元素还在动画，当前子级设回 state.children;
@@ -104,14 +105,16 @@ class QueueAnim extends React.Component {
     const childrenShow = !newChildren.length ? {} : this.state.childrenShow;
     this.keysToEnterPaused = {};
     // 在出场没结束时，childrenShow 里的值将不会清除。再触发进场时， childrenShow 里的值是保留着的, 设置了 enterForcedRePlay 将重新播放进场。
-    this.keysToLeave.forEach(key => {
-      // 将所有在出场里的停止掉。避免间隔性出现
-      this.keysToEnterPaused[key] = true;
-      if (nextProps.enterForcedRePlay) {
-        // 清掉所有出场的。
-        delete childrenShow[key];
-      }
-    });
+    if (!emptyBool) {// 空子级状态下刷新不做处理
+      this.keysToLeave.forEach(key => {
+        // 将所有在出场里的停止掉。避免间隔性出现
+        this.keysToEnterPaused[key] = true;
+        if (nextProps.enterForcedRePlay) {
+          // 清掉所有出场的。
+          delete childrenShow[key];
+        }
+      });
+    }
 
     this.keysToEnter = [];
     this.keysToLeave = [];
@@ -295,6 +298,7 @@ class QueueAnim extends React.Component {
       }
     }
     const paused = this.keysToEnterPaused[key] && !this.keysToLeave.indexOf(key) >= 0;
+
     animation = paused ? null : animation;
     const isFunc = typeof child.type === 'function';
     const forcedJudg = isFunc ? {} : null;