Add animation for dropdown submenu, ref #797

components/dropdown/dropdown.jsx

@@ -9,8 +9,12 @@ export default React.createClass({
     };
   },
   render: function () {
+    const { overlay, ...otherProps } = this.props;
+    const menu = React.cloneElement(overlay, {
+      openTransitionName: 'zoom-big',
+    });
     return (
-      <Dropdown {...this.props} />
+      <Dropdown {...otherProps} overlay={menu} />
     );
   }
 });

components/menu/index.jsx

@@ -40,35 +40,43 @@ const AntMenu = React.createClass({
     this.props.onClose(e);
   },
   render() {
-    let openAnimation = '';
-    switch (this.props.mode) {
-    case 'horizontal':
-      openAnimation = 'slide-up';
-      break;
-    case 'vertical':
-      openAnimation = 'zoom-big';
-      break;
-    case 'inline':
-      openAnimation = animation;
-      break;
-    default:
+    let openAnimation = this.props.openAnimation || this.props.openTransitionName;
+    if (!openAnimation) {
+      switch (this.props.mode) {
+      case 'horizontal':
+        openAnimation = 'slide-up';
+        break;
+      case 'vertical':
+        openAnimation = 'zoom-big';
+        break;
+      case 'inline':
+        openAnimation = animation;
+        break;
+      default:
+      }
     }
 
-    // 这组属性的目的是
-    // 弹出型的菜单需要点击后立即关闭
-    // 另外，弹出型的菜单的受控模式没有使用场景
-    let props = {
-      openKeys: this.state.openKeys,
-      onClick: this.handleClick,
-      onOpen: this.handleOpenKeys,
-      onClose: this.handleCloseKeys,
-    };
+    let props = {};
     const className = this.props.className + ' ' + this.props.prefixCls + '-' + this.props.theme;
     if (this.props.mode === 'inline') {
-      return <Menu {...this.props} className={className} openAnimation={openAnimation} />;
+      // 这组属性的目的是
+      // 弹出型的菜单需要点击后立即关闭
+      // 另外，弹出型的菜单的受控模式没有使用场景
+      props = {
+        openKeys: this.state.openKeys,
+        onClick: this.handleClick,
+        onOpen: this.handleOpenKeys,
+        onClose: this.handleCloseKeys,
+        openAnimation,
+        className,
+      };
     } else {
-      return <Menu {...this.props} {...props} className={className} openTransitionName={openAnimation} />;
+      props = {
+        openTransitionName: openAnimation,
+        className,
+      };
     }
+    return <Menu {...this.props} {...props} />;
   }
 });
 

style/components/dropdown.less

@@ -118,6 +118,7 @@
       position: absolute;
       min-width: 100%;
       margin-left: 4px;
+      transform-origin: 0 0;
     }
 
     &-submenu:first-child &-submenu-title {