Add menu animation

components/menu/index.jsx

@@ -1,15 +1,118 @@
-import Menu from 'rc-menu';
 import React from 'react';
+import Menu from 'rc-menu';
+import velocity from 'velocity-animate';
+import EnterAnimation from 'enter-animation';
+
+const animation = {
+  enter(node, done) {
+    var ok = false;
+
+    function complete() {
+      if (!ok) {
+        ok = 1;
+        done();
+      }
+    }
+    node.style.display = 'none';
+    velocity(node, 'slideDown', {
+      duration: 300,
+      complete: complete,
+      easing: 'easeInOutQuad'
+    });
+    return {
+      stop: function () {
+        velocity(node, 'finish');
+        complete();
+      }
+    };
+  },
+  appear() {
+    return this.enter.apply(this, arguments);
+  },
+  leave(node, done) {
+    var ok = false;
+
+    function complete() {
+      if (!ok) {
+        ok = 1;
+        done();
+      }
+    }
+
+    velocity(node, 'slideUp', {
+      duration: 300,
+      complete: complete,
+      easing: 'easeInOutQuad'
+    });
+    return {
+      stop: function () {
+        velocity(node, 'finish');
+        complete();
+      }
+    };
+  }
+};
 
 const AntMenu = React.createClass({
-  getDefaultProps(){
+  getDefaultProps() {
     return {
       prefixCls: 'ant-menu'
     };
   },
-
-  render(){
-    return <Menu {...this.props}/>;
+  toggle(info) {
+    let dom = React.findDOMNode(info.item || info);
+    let ul = dom.getElementsByTagName('ul')[0];
+    function TweenAnimate(_dom) {
+      let num=Number((.12/_dom.children.length).toFixed(3));
+      if(info.open){
+        EnterAnimation.to(_dom,{duration:.15,data:'scale',interval:num});
+      }else{
+        EnterAnimation.to(_dom,{duration:.15,data:'scale',interval:num,direction:'leave',upend:true,ease:'cubic-bezier(0.6, 0.04, 0.98, 0.335)'});
+      }
+    }
+    if (this.props.mode && info.item && !ul) {
+      setTimeout(()=> {
+        ul = dom.getElementsByTagName('ul')[0];
+        TweenAnimate(ul);
+      }, 1);
+    } else {
+      if (!ul) {
+        ul = dom;
+      }
+      TweenAnimate(ul);
+    }
+  },
+  componentDidMount() {
+    this.componentDidUpdate(this.props);
+  },
+  componentDidUpdate(prevProps) {
+    //更改初始进场(dropdown)
+    if (!prevProps.mode) {
+      var height = React.findDOMNode(this).offsetHeight;
+      this.open = height ? true : false;//!this.open;
+      this.toggle(this);
+    }
+  },
+  render() {
+    let openAnimation = '';
+    switch (this.props.mode) {
+      case 'horizontal':
+        openAnimation = 'slide-up';
+        break;
+      case 'vertical':
+        openAnimation = 'zoom';
+        break;
+      case 'inline':
+        openAnimation = animation;
+        break;
+    }
+    let html = '';
+    if (this.props.mode === 'inline') {
+      html = <Menu {...this.props} openAnimation={openAnimation} onOpen={this.toggle} onClose={this.toggle}/>;
+    } else {
+      html = <Menu {...this.props} openTransitionName={openAnimation} onOpen={this.toggle} onClose={this.toggle}/>;
+    }
+    return html;
   }
 });
 

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",
     "xhr2": "~0.1.3"
   },

style/components/menu.less

@@ -134,6 +134,7 @@
         .ie-rotate(1);
         transform: rotate(180deg) scale(0.75);
       }
+
     }
   }
 
@@ -202,6 +203,12 @@
       height: 0;
       clear: both;
     }
+
+    & .@{menu-prefix-cls}-vertical.@{menu-prefix-cls}-sub {
+      & > .@{menu-prefix-cls}-item, & > .@{menu-prefix-cls}-submenu {
+        transform-origin: 50% 0;
+      }
+    }
   }
 
   &-vertical, &-inline {
@@ -233,6 +240,11 @@
 
   &-vertical&-sub {
     padding: 0;
+    transform-origin: 0 0;
+    //animation-duration: 0.4s;
+    & > .@{menu-prefix-cls}-item, & > .@{menu-prefix-cls}-submenu {
+      transform-origin: 0 0;
+    }
   }
 
   &-root&-vertical,
@@ -246,6 +258,8 @@
     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;
@@ -253,6 +267,10 @@
       list-style-type: disc;
       list-style-position: inside;
     }
+
+    & > .@{menu-prefix-cls}-item, & > .@{menu-prefix-cls}-submenu {
+      transform-origin: 50% -30px;
+    }
   }
 }