Merge pull request #188 from ant-design/new-menu-animation

Add menu animation

components/menu/index.jsx

@@ -1,15 +1,63 @@
-import Menu from 'rc-menu';
 import React from 'react';
+import Menu from 'rc-menu';
+import velocity from 'velocity-animate';
+
+const animation = {
+  enter(node, done) {
+    this.animate(node, 'slideDown', done);
+  },
+  leave(node, done) {
+    this.animate(node, 'slideUp', done);
+  },
+  appear() {
+    return this.enter.apply(this, arguments);
+  },
+  animate(node, transitionName, done) {
+    let ok;
+    function complete() {
+      if (!ok) {
+        ok = true;
+        done();
+      }
+    }
+    velocity(node, transitionName, {
+      duration: 240,
+      complete: complete,
+      easing: 'easeInOutQuad'
+    });
+    return {
+      stop() {
+        velocity(node, 'finish');
+        complete();
+      }
+    };
+  }
+};
 
 const AntMenu = React.createClass({
-  getDefaultProps(){
+  getDefaultProps() {
     return {
       prefixCls: 'ant-menu'
     };
   },
-
-  render(){
-    return <Menu {...this.props}/>;
+  render() {
+    let openAnimation = '';
+    switch (this.props.mode) {
+      case 'horizontal':
+        openAnimation = 'slide-up';
+        break;
+      case 'vertical':
+        openAnimation = 'zoom';
+        break;
+      case 'inline':
+        openAnimation = animation;
+        break;
+    }
+    if (this.props.mode === 'inline') {
+      return <Menu {...this.props} openAnimation={openAnimation} />;
+    } else {
+      return <Menu {...this.props} openTransitionName={openAnimation} />;
+    }
   }
 });
 

package.json

@@ -62,6 +62,7 @@
     "rc-upload": "~1.3.1",
     "rc-util": "~2.0.3",
     "react-slick2": "~0.6.6",
+    "velocity-animate": "~1.2.2",
     "reqwest": "~2.0.2",
     "velocity-animate": "^1.2.2",
     "xhr2": "~0.1.3"

style/components/menu.less

@@ -134,6 +134,7 @@
         .ie-rotate(1);
         transform: rotate(180deg) scale(0.75);
       }
+
     }
   }
 
@@ -233,6 +234,10 @@
 
   &-vertical&-sub {
     padding: 0;
+    transform-origin: 0 0;
+    & > .@{menu-prefix-cls}-item, & > .@{menu-prefix-cls}-submenu {
+      transform-origin: 0 0;
+    }
   }
 
   &-root&-vertical,
@@ -246,7 +251,7 @@
     border: none;
     border-radius: 0;
     box-shadow: none;
-
+    overflow: hidden;
     & > .@{menu-prefix-cls}-item, & > .@{menu-prefix-cls}-submenu > .@{menu-prefix-cls}-submenu-title {
       line-height: 34px;
       height: 34px;