fix ant-design/ant-motion#108

README.md

@@ -67,8 +67,8 @@ ReactDom.render(
 | leaveReverse | boolean      | false   | reverse animation order at leave |
 | ease       | string / array | `easeOutQuart` | animation easing config like `'ease'`, `['easeIn', 'easeOut']`, `[[.42,0,.58,1]`, [.42,0,.58,1]]: [more](http://julian.com/research/velocity/#easing) |
 | appear     | boolean        |  true   | whether support appear anim |
-| component  | string | `div` | component tag |
-| componentProps | Object | null | component tag props |
+| component  | string / React.Element | `div` | component tag |
+| componentProps | Object | null | component is React.Element, component tag props |
 | animatingClassName | array | `['queue-anim-entering', 'queue-anim-leaving']` | className to every element of animating |
 | onEnd      | function      |   null    |  animate end callback({ key, type }), type: `enter` or `leave` |
 

examples/component.html

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

examples/component.js

@@ -0,0 +1,46 @@
+/* eslint-disable no-console,react/no-multi-comp */
+import QueueAnim from 'rc-queue-anim';
+import React from 'react';
+import ReactDom from 'react-dom';
+import Icon from 'antd/lib/icon';
+import Menu from 'antd/lib/menu';
+import 'antd/lib/style/index.less';
+import 'antd/lib/menu/style/index.less';
+const SubMenu = Menu.SubMenu;
+const MenuItemGroup = Menu.ItemGroup;
+class Demo extends React.Component {
+  render() {
+    return (<QueueAnim
+      component={Menu}
+      style={{ width: 240, margin: 20 }}
+      componentProps={{ mode: 'vertical' }}
+      type="left"
+    >
+      <SubMenu key="sub1" title={<span><Icon type="mail" /><span>Navigation One</span></span>}>
+        <MenuItemGroup title="Item 1">
+          <Menu.Item key="1">Option 1</Menu.Item>
+          <Menu.Item key="2">Option 2</Menu.Item>
+        </MenuItemGroup>
+        <MenuItemGroup title="Iteom 2">
+          <Menu.Item key="3">Option 3</Menu.Item>
+          <Menu.Item key="4">Option 4</Menu.Item>
+        </MenuItemGroup>
+      </SubMenu>
+      <SubMenu key="sub2" title={<span><Icon type="appstore" /><span>Navigation Two</span></span>}>
+        <Menu.Item key="5">Option 5</Menu.Item>
+        <Menu.Item key="6">Option 6</Menu.Item>
+        <SubMenu key="sub3" title="Submenu">
+          <Menu.Item key="7">Option 7</Menu.Item>
+          <Menu.Item key="8">Option 8</Menu.Item>
+        </SubMenu>
+      </SubMenu>
+      <SubMenu key="sub4" title={<span><icon type="setting" /><span>Navigation Three</span></span>}>
+        <Menu.Item key="9">Option 9</Menu.Item>
+        <Menu.Item key="10">Option 10</Menu.Item>
+        <Menu.Item key="11">Option 11</Menu.Item>
+        <Menu.Item key="12">Option 12</Menu.Item>
+      </SubMenu>
+    </QueueAnim>);
+  }
+}
+ReactDom.render(<Demo />, document.getElementById('__react-content'));

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rc-queue-anim",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "description": "Queue animation component for react",
   "keywords": [
     "react",
@@ -46,6 +46,7 @@
     "coverage": "rc-tools run coverage"
   },
   "devDependencies": {
+    "antd": "^2.12.3",
     "expect.js": "~0.3.1",
     "history": "^2.1.2",
     "jquery": "~1.11.3",
@@ -64,6 +65,6 @@
   "dependencies": {
     "babel-runtime": "6.x",
     "prop-types": "^15.5.0",
-    "rc-tween-one": "~1.3.0"
+    "rc-tween-one": "~1.4.1"
   }
 }

src/QueueAnim.jsx

@@ -304,7 +304,8 @@ class QueueAnim extends React.Component {
       const paused = this.keysToEnterPaused[key]
         && !(this.keysToLeave.indexOf(key) >= 0 && this.state.childrenShow[key]);
       animation = paused ? null : animation;
-      return createElement(TweenOne, { key, component: null, animation }, child);
+      return createElement(TweenOne,
+        { key, component: child.type, componentProps: child.props, animation });
     }
     return null;
   };