up tree and add velocity-animate

components/tree/demo/basic.md

@@ -13,15 +13,15 @@ var TreeNode = Tree.TreeNode;
 React.render(
   <Tree className="myCls" defaultExpandAll={true}>
     <TreeNode title="parent 1">
-      <TreeNode>leaf</TreeNode>
+      <TreeNode title="leaf" />
       <TreeNode title="parent 1-1">
         <TreeNode title="parent 2-1">
-          <TreeNode>leaf</TreeNode>
+          <TreeNode title="leaf" />
+          <TreeNode title="leaf" />
         </TreeNode>
-        <TreeNode>leaf</TreeNode>
+        <TreeNode title="leaf" />
       </TreeNode>
     </TreeNode>
-    <TreeNode>leaf</TreeNode>
   </Tree>
 , document.getElementById('components-tree-demo-basic'));
 ````

components/tree/demo/checkbox.md

@@ -9,26 +9,76 @@
 ````jsx
 var Tree = antd.Tree;
 var TreeNode = Tree.TreeNode;
+var velocity = antd.velocity;
 
 function handleCheck(info) {
   console.log('check: ', info);
 }
 
-React.render(
-  <Tree defaultExpandAll={true} checkable={true} onCheck={handleCheck}>
+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
+    });
+    return {
+      stop: function () {
+        velocity(node, 'finish');
+        // velocity complete is async
+        complete();
+      }
+    };
+  },
+
+  leave(node, done){
+    var ok = false;
+
+    function complete() {
+      if (!ok) {
+        ok = 1;
+        done();
+      }
+    }
+
+    velocity(node, 'slideUp', {
+      duration: 300,
+      complete: complete
+    });
+    return {
+      stop: function () {
+        velocity(node, 'finish');
+        // velocity complete is async
+        complete();
+      }
+    };
+  },
+};
+
+React.render(<div>
+  {React.cloneElement(<Tree defaultExpandAll={true} checkable={true} onCheck={handleCheck}>
     <TreeNode title="parent 1">
-      <TreeNode>leaf</TreeNode>
+      <TreeNode title="leaf" />
       <TreeNode title="parent 1-1">
         <TreeNode title="parent 2-1">
-          <TreeNode>leaf</TreeNode>
-          <TreeNode>leaf</TreeNode>
+          <TreeNode title="leaf" />
+          <TreeNode title="leaf" />
         </TreeNode>
-        <TreeNode>leaf</TreeNode>
-        <TreeNode>leaf</TreeNode>
+        <TreeNode title="leaf" />
       </TreeNode>
     </TreeNode>
-    <TreeNode>leaf</TreeNode>
-    <TreeNode>leaf</TreeNode>
-  </Tree>
+  </Tree>, {
+    openAnimation: animation,
+  })}
+</div>
+
 , document.getElementById('components-tree-demo-checkbox'));
 ````

index.js

@@ -44,6 +44,8 @@ const antd = {
   Menu: require('./components/menu')
 };
 
+antd.velocity = require('velocity-animate');
+
 module.exports = antd;
 
 antd.version = require('./package.json').version;

package.json

@@ -58,11 +58,12 @@
     "rc-table": "~3.1.0",
     "rc-tabs": "~5.3.2",
     "rc-tooltip": "~2.6.4",
-    "rc-tree": "~0.14.3",
+    "rc-tree": "~0.15.1",
     "rc-upload": "~1.3.1",
     "rc-util": "~2.0.3",
     "react-slick2": "~0.6.6",
     "reqwest": "~2.0.2",
+    "velocity-animate": "^1.2.2",
     "xhr2": "~0.1.3"
   },
   "devDependencies": {

style/components/tree.less

@@ -44,6 +44,7 @@
       &.@{tree-prefix-cls}-checkbox {
         margin: 3px 7px 0 0;
       }
+      &.@{tree-prefix-cls}-switcher-noop,
       &.@{tree-prefix-cls}-switcher,
       &.@{tree-prefix-cls}-iconEle {
         line-height: 0;
@@ -55,9 +56,6 @@
         border: 0 none;
         cursor: pointer;
         outline: none;
-        background-color: transparent;
-        background-repeat: no-repeat;
-        background-attachment: scroll;
       }
       &.@{tree-prefix-cls}-switcher {
         &-disabled {
@@ -90,6 +88,12 @@
       }
     }
   }
+  &-child-tree {
+    display: none;
+    &-open {
+      display: block;
+    }
+  }
   &-treenode-disabled {
     >span,
     >a {