From 85ec9a87434628e84c132ecd54e475da74290029 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Wed, 27 Apr 2016 15:26:03 +0800
Subject: [PATCH] Fix Menu switch mode behavious
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

切换菜单模式时，子菜单有异常的表现
---
 components/common/openAnimation.js  |  1 +
 components/menu/demo/switch-mode.md | 65 +++++++++++++++++++++++++++++
 components/menu/index.jsx           | 15 ++++++-
 3 files changed, 80 insertions(+), 1 deletion(-)
 create mode 100644 components/menu/demo/switch-mode.md

diff --git a/components/common/openAnimation.js b/components/common/openAnimation.js
index 80d857a055..84e2b75fff 100644
--- a/components/common/openAnimation.js
+++ b/components/common/openAnimation.js
@@ -9,6 +9,7 @@ function animate(node, show, transitionName, done) {
   function complete() {
     if (!ok) {
       ok = true;
+      node.style.display = '';
       done();
     }
   }
diff --git a/components/menu/demo/switch-mode.md b/components/menu/demo/switch-mode.md
new file mode 100644
index 0000000000..75170f34e1
--- /dev/null
+++ b/components/menu/demo/switch-mode.md
@@ -0,0 +1,65 @@
+# 切换
+
+- order: 5
+
+展示动态切换模式。
+
+---
+
+````jsx
+import { Menu, Icon, Switch } from 'antd';
+const SubMenu = Menu.SubMenu;
+const MenuItemGroup = Menu.ItemGroup;
+
+const Sider = React.createClass({
+  getInitialState() {
+    return {
+      mode: 'inline',
+    };
+  },
+  changeMode(value) {
+    this.setState({
+      mode: value ? 'vertical' : 'inline',
+    });
+  },
+  render() {
+    return (
+      <div>
+        <Switch onChange={this.changeMode} />
+        <br />
+        <br />
+        <Menu
+          style={{ width: 240 }}
+          defaultOpenKeys={['sub1']}
+          mode={this.state.mode}>
+          <SubMenu key="sub1" title={<span><Icon type="mail" /><span>导航一</span></span>}>
+            <MenuItemGroup title="分组1">
+              <Menu.Item key="1">选项1</Menu.Item>
+              <Menu.Item key="2">选项2</Menu.Item>
+            </MenuItemGroup>
+            <MenuItemGroup title="分组2">
+              <Menu.Item key="3">选项3</Menu.Item>
+              <Menu.Item key="4">选项4</Menu.Item>
+            </MenuItemGroup>
+          </SubMenu>
+          <SubMenu key="sub2" title={<span><Icon type="appstore" /><span>导航二</span></span>}>
+            <Menu.Item key="5">选项5</Menu.Item>
+            <Menu.Item key="6">选项6</Menu.Item>
+            <SubMenu key="sub3" title="三级导航">
+              <Menu.Item key="7">选项7</Menu.Item>
+              <Menu.Item key="8">选项8</Menu.Item>
+            </SubMenu>
+          </SubMenu>
+          <SubMenu key="sub4" title={<span><Icon type="setting" /><span>导航三</span></span>}>
+            <Menu.Item key="9">选项9</Menu.Item>
+            <Menu.Item key="10">选项10</Menu.Item>
+            <Menu.Item key="11">选项11</Menu.Item>
+            <Menu.Item key="12">选项12</Menu.Item>
+          </SubMenu>
+        </Menu>
+      </div>
+    );
+  }
+});
+ReactDOM.render(<Sider />, mountNode);
+````
diff --git a/components/menu/index.jsx b/components/menu/index.jsx
index 341810ca51..118edef81e 100644
--- a/components/menu/index.jsx
+++ b/components/menu/index.jsx
@@ -21,6 +21,12 @@ const AntMenu = React.createClass({
       openKeys: []
     };
   },
+  componentWillReceiveProps(nextProps) {
+    if (this.props.mode === 'inline' &&
+        nextProps.mode !== 'inline') {
+      this.switchModeFromInline = true;
+    }
+  },
   handleClick(e) {
     this.setState({
       openKeys: []
@@ -47,7 +53,14 @@ const AntMenu = React.createClass({
           openAnimation = 'slide-up';
           break;
         case 'vertical':
-          openAnimation = 'zoom-big';
+          // When mode switch from inline
+          // submenu should hide without animation
+          if (this.switchModeFromInline) {
+            openAnimation = '';
+            this.switchModeFromInline = false;
+          } else {
+            openAnimation = 'zoom-big';
+          }
           break;
         case 'inline':
           openAnimation = animation;