add dialog style,update bug

examples/dialog-style.html

@@ -0,0 +1 @@
+placeholder

examples/dialog-style.js

@@ -0,0 +1,54 @@
+import QueueAnim from 'rc-queue-anim';
+import React from 'react';
+import ReactDom from 'react-dom';
+
+import Dialog from 'rc-dialog';
+import 'rc-dialog/assets/index.css';
+
+const App = React.createClass({
+  getInitialState() {
+    return {
+      show: false
+    };
+  },
+  onClick() {
+    this.setState({
+      show: true,
+    });
+  },
+  onClose() {
+    this.setState({
+      show: false
+    });
+  },
+  render() {
+    let dialog;
+    if (this.state.show) {
+      dialog = <Dialog visible={this.state.show}
+        animation="zoom"
+        maskAnimation="fade"
+        onClose={this.onClose}
+        style={{width: 600}}
+        title={<div> 第二个弹框</div>}>
+        <QueueAnim>
+          <div key="1">依次进入</div>
+          <div key="2">依次进入</div>
+          <div key="3">依次进入</div>
+          <div key="4">依次进入</div>
+        </QueueAnim>
+      </Dialog>
+    }
+    return <div>
+      <QueueAnim type={['right', 'left']} interval={[100, 200]} delay={[0, 1000]} duration={[500, 2000]} ease={['easeOutBack', 'easeInOutCirc']} leaveReverse={true}>
+        <div key="1">依次进入</div>
+        <div key="2">依次进入</div>
+        <div key="3">依次进入</div>
+        <div key="4">依次进入</div>
+        {dialog}
+      </QueueAnim>
+      <button onClick={this.onClick}>弹出框口</button>
+    </div>;
+  }
+});
+
+ReactDom.render(<App />, document.getElementById('__react-content'));

package.json

@@ -43,6 +43,7 @@
     "precommit-hook": "1.x",
     "rc-server": "3.x",
     "rc-tools": "4.x",
+    "rc-dialog":"~5.2.1",
     "react": "~0.14.0",
     "react-addons-test-utils": "~0.14.0",
     "react-dom": "~0.14.0",

src/QueueAnim.jsx

@@ -70,6 +70,9 @@ class QueueAnim extends React.Component {
     });
 
     nextChildren.forEach((c)=> {
+      if (!c) {
+        return;
+      }
       const key = c.key;
       const hasPrev = findChildInChildrenByKey(currentChildren, key);
       if (!hasPrev && key) {
@@ -78,6 +81,9 @@ class QueueAnim extends React.Component {
     });
 
     currentChildren.forEach((c)=> {
+      if (!c) {
+        return;
+      }
       const key = c.key;
       const hasNext = findChildInChildrenByKey(nextChildren, key);
       if (!hasNext && key) {

src/utils.js

@@ -12,7 +12,7 @@ export function findChildInChildrenByKey(children, key) {
   let ret = null;
   if (children) {
     children.forEach((c) => {
-      if (ret) {
+      if (ret || !c) {
         return;
       }
       if (c.key === key) {
@@ -30,17 +30,23 @@ export function mergeChildren(prev, next) {
   const nextChildrenPending = {};
   let pendingChildren = [];
   prev.forEach((c) => {
+    if (!c) {
+      return;
+    }
     if (findChildInChildrenByKey(next, c.key)) {
       if (pendingChildren.length) {
         nextChildrenPending[c.key] = pendingChildren;
         pendingChildren = [];
       }
-    } else {
+    } else if (c.key) {
       pendingChildren.push(c);
     }
   });
 
   next.forEach((c) => {
+    if (!c) {
+      return;
+    }
     if (nextChildrenPending.hasOwnProperty(c.key)) {
       ret = ret.concat(nextChildrenPending[c.key]);
     }